基本網(wǎng)頁布局一般分為三種：
1）流式布局
2）浮動(dòng)布局
3）絕對定位布局
css中的定位機(jī)制：
1）標(biāo)準(zhǔn)文檔流
特點(diǎn)：a.從上到下龄章，從左到右，輸出文檔內(nèi)容乞封；
b.由塊級元素和行級元素組成
（塊級元素：從左到右撐滿頁面做裙，獨(dú)占一行；觸碰到頁面邊緣時(shí)肃晚，會(huì)自動(dòng)換行锚贱；eg: div、ul关串、li拧廊、dl、dt晋修、p）
（行級元素：能在同一行內(nèi)顯示吧碾；不會(huì)改變HTML文檔結(jié)構(gòu)；eg: span墓卦、strong倦春、img、input）
（塊級元素和行級元素都是盒子模型）
2）浮動(dòng)：通過float屬性實(shí)現(xiàn)橫向多列布局
3）絕對定位
盒子模型：
1）網(wǎng)頁布局的基石落剪；
2）有四部分組成：邊框border睁本、外邊距margin、內(nèi)邊距padding忠怖、盒子中的內(nèi)容content添履；
3）盒子3D模型：從上到下，依次為border脑又、content+padding暮胧、backgroud-image、background-color问麸、margin往衷；
4）盒子模型尺寸=外邊距+邊框+內(nèi)邊距+盒子中內(nèi)容的尺寸
橫向兩列布局：
1.float屬性：使縱向排列的塊級元素橫向排列；
2.margin屬性：設(shè)置兩列之間的間距
position屬性：
1）擁有3種定位形式：
a.靜態(tài)定位; b.相對定位;c.絕對定位
2）可設(shè)置4個(gè)屬性值：
a. static（靜態(tài)定位）严卖；
b. relative（相對定位）席舍；
c. absolute（絕對定位）；
d. fixed（固定定位）
（絕對定位和固定定位都屬于絕對定位）
相對定位：
1）相對于自身原有位置進(jìn)行偏移哮笆；
2）仍處于標(biāo)準(zhǔn)文檔流中来颤；
3）隨即擁有偏移屬性和z-index屬性
絕對定位布局：
1）通過設(shè)置position屬性實(shí)現(xiàn)汰扭；
2）CSS中規(guī)定的第三種定位機(jī)制；
3）能夠?qū)崿F(xiàn)橫向多列布局及較為復(fù)雜的定位
絕對定位：
1）建立了以包含塊為基準(zhǔn)的定位福铅；
2）完全脫離了標(biāo)準(zhǔn)文檔流萝毛；
3）隨即擁有偏移屬性和z-index屬性
a) 未設(shè)置偏移量時(shí)：
無論是否存在已定位的祖先元素，都保持在元素初始位置滑黔，脫離了標(biāo)準(zhǔn)文檔流笆包；
b)設(shè)置偏移量時(shí)，偏移參照基準(zhǔn)為：
無已定位祖先元素略荡，以<html>為偏移參照基準(zhǔn)庵佣；
有已定位祖先元素，以距其最近的已定位祖先元素為偏移參照標(biāo)準(zhǔn)
c)當(dāng)一個(gè)元素設(shè)置了絕對定位汛兜，沒有設(shè)置寬度時(shí)巴粪，元素的寬度根據(jù)內(nèi)容進(jìn)行調(diào)節(jié)
使用absolute實(shí)現(xiàn)橫向兩列布局：
常用于一列固定寬度，另一列寬度自適應(yīng)的情況
主要應(yīng)用技能：
1）relative父元素相對定位粥谬；
2）absolute自適應(yīng)寬度元素絕對定位
（固定寬度列的高度>自適應(yīng)寬度的列的高度）
