一，標準流（默認狀態，元素盒按照文檔中出現的順序排列）

塊級元素--垂直排版 display:block;

單獨一行，可以設置寬高，寬度默認和父元素寬度一致

一般結構性標記都為塊級元素，如div，h，p，ul等

行內元素--水平排版 display:inline-block;

與其他元素並排一行，不能設置寬高，寬度默認為內容的寬度

一般描述性標記都為行內元素，如span，a，img等

二，浮動流--水平排版

左浮動--float:left;

右浮動--float:right;

元素可以左右浮動，當該元素外邊框邊緣遇到另一個元素的外邊框時，該元素有確定位置

浮動流的包含框寬度不夠時，元素向下移動，兩個浮動元素高度不同時，可能被卡住

三，定位流（通過top，bottom，left，right調整位置）

相對定位--position:relative;

top，bottom，left，right是相對於該元素在標準流中的位置移動的距離，不管是否移動，元素仍占據其在標準流中的位置，顯示上可能覆蓋其他元素

絕對定位--position:absolute;

top，bottom，left，right是相對於距離最近的已定位的父元素移動的距離，可以覆蓋頁面上其他元素，元素在標準流中不占據位置，不影響標準流中元素的位置

絕對定位有一個屬性z-index，z-index越大顯示在越上面

一般情況下，父元素采用相對定位，子元素采用絕對定位。以相對定位的父元素作為子元素絕對定位的參照物。

當然這種情況並不是絕對的，父元素也可以設置成absolute，子元素要找的是非static定位的父元素。

固定定位--positon:fixed;

css網頁布局方式的理解