CSS包含3種基本的布局模型，分別是Flow、Layer和Float.
在網(wǎng)頁(yè)中漱逸，元素有三種布局模型：流動(dòng)模型（Flow）、浮動(dòng)模型（Float）和層模型（Layer）
流動(dòng)模型
流動(dòng)（Flow）是默認(rèn)的網(wǎng)頁(yè)布局模式游沿。
也就是說(shuō)網(wǎng)頁(yè)在默認(rèn)狀態(tài)下的HTML網(wǎng)頁(yè)元素都是根據(jù)流動(dòng)模型來(lái)分布網(wǎng)頁(yè)內(nèi)容的饰抒。
典型特征
1.塊狀元素都處在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下诀黍，塊狀元素的寬度都為100%
2.在流動(dòng)模型下袋坑，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。
浮動(dòng)模型
通過(guò)CSS設(shè)置塊狀元素的float屬性眯勾，可以將多個(gè)塊狀元素顯示在同一行枣宫。如float:left;
層模型
通過(guò)CSS設(shè)置position屬性，來(lái)實(shí)現(xiàn)層布局模型咒精。
層模型有三種形式：絕對(duì)定位（absolute）镶柱、相對(duì)定位（relative）和固定定位（fixed）。
一模叙、絕對(duì)定位 position:absolute
將元素從文檔流中拖出來(lái)歇拆，然后使用left、rigth范咨、top故觅、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊渠啊，則相對(duì)于body元素输吏，即相對(duì)于瀏覽器窗口。
二替蛉、相對(duì)定位 position:relative
通過(guò)left贯溅、rigth、top躲查、bottom屬性確定元素在正常文檔流中的偏移位置它浅。相對(duì)定位完成的過(guò)程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來(lái))，然后相對(duì)于以前的位置移動(dòng)镣煮，移動(dòng)的方向和幅度由left姐霍、right、top、bottom屬性確定镊折，偏移前的位置保留不動(dòng)胯府。
三、固定定位 position:fixed
fixed：表示固定定位恨胚，與absolute定位類型類似骂因，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁(yè)窗口）本身。由于視圖本身是固定的与纽，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化侣签，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小急迂，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響蹦肴，這與background-attachment:fixed?屬性功能相同僚碎。
relative與absolute組合使用
1、參照定位的元素必須是相對(duì)定位元素的前輩元素
2阴幌、參照定位的元素必須加入position:relative;
3勺阐、定位元素加入position:absolute，便可以使用top矛双、bottom渊抽、left、right來(lái)進(jìn)行偏移定位了
