基本網頁布局一般分為三種：
1）流式布局
2）浮動布局
3）絕對定位布局
css中的定位機制：
1）標準文檔流
特點：a.從上到下，從左到右，輸出文檔內容；
b.由塊級元素和行級元素組成
（塊級元素：從左到右撐滿頁面，獨占一行；觸碰到頁面邊緣時，會自動換行；eg: div、ul、li、dl、dt、p）
（行級元素：能在同一行內顯示；不會改變HTML文檔結構；eg: span、strong、img、input）
（塊級元素和行級元素都是盒子模型）
2）浮動：通過float屬性實現橫向多列布局
3）絕對定位
盒子模型：
1）網頁布局的基石；
2）有四部分組成：邊框border、外邊距margin、內邊距padding、盒子中的內容content；
3）盒子3D模型：從上到下，依次為border、content+padding、backgroud-image、background-color、margin；
4）盒子模型尺寸=外邊距+邊框+內邊距+盒子中內容的尺寸
橫向兩列布局：
1.float屬性：使縱向排列的塊級元素橫向排列；
2.margin屬性：設置兩列之間的間距
position屬性：
1）擁有3種定位形式：
a.靜態定位; b.相對定位;c.絕對定位
2）可設置4個屬性值：
a. static（靜態定位）；
b. relative（相對定位）；
c. absolute（絕對定位）；
d. fixed（固定定位）
（絕對定位和固定定位都屬于絕對定位）
相對定位：
1）相對于自身原有位置進行偏移；
2）仍處于標準文檔流中；
3）隨即擁有偏移屬性和z-index屬性
絕對定位布局：
1）通過設置position屬性實現；
2）CSS中規定的第三種定位機制；
3）能夠實現橫向多列布局及較為復雜的定位
絕對定位：
1）建立了以包含塊為基準的定位；
2）完全脫離了標準文檔流；
3）隨即擁有偏移屬性和z-index屬性
a) 未設置偏移量時：
無論是否存在已定位的祖先元素，都保持在元素初始位置，脫離了標準文檔流；
b)設置偏移量時，偏移參照基準為：
無已定位祖先元素，以<html>為偏移參照基準；
有已定位祖先元素，以距其最近的已定位祖先元素為偏移參照標準
c)當一個元素設置了絕對定位，沒有設置寬度時，元素的寬度根據內容進行調節
使用absolute實現橫向兩列布局：
常用于一列固定寬度，另一列寬度自適應的情況
主要應用技能：
1）relative父元素相對定位；
2）absolute自適應寬度元素絕對定位
（固定寬度列的高度>自適應寬度的列的高度）
