在網(wǎng)頁中有是那種布局模型
- 流動(dòng)模型（Flow）
流動(dòng)模型是默認(rèn)的網(wǎng)頁布局模式。
流動(dòng)模型具有兩個(gè)比較典型的特點(diǎn)：
- 塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都是100%，塊狀元素都會(huì)以行的形式占據(jù)位置。
2.內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。 - 有序列表第二項(xiàng)
浮動(dòng)模型（Float）
如果想讓兩個(gè)塊狀元素并排顯示，可以用float層模型（layer）
層模型有三種形式：
- 絕對定位(position: absolute)
絕對定位將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對定位。如果不存在這樣的父包含塊，則相對于body元素，即相對于瀏覽器窗口。 - 相對定位(position: relative)
通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按照static（float）方式生成一個(gè)元素（并且元素像層一樣浮動(dòng)了起來），然后相對于以前的位置移動(dòng)，移動(dòng)方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)。
3.固定定位(position: fixed)
與absolute定位類型類似，但它的相對移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會(huì)隨著瀏覽器的窗口的滾動(dòng)條滾動(dòng)而變化，除非你再屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或者改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響。
- 延伸思考
我們知道position: absolute是相對瀏覽器窗口的，如果想讓它相對某個(gè)元素進(jìn)行定位可以不可以呢？當(dāng)然可以，需要使用相對定位position:relative來幫忙。但必須遵守以下規(guī)范：
1.參照定位的元素必須是相對定位元素的前輩元素；例：box2相對box1進(jìn)行定位，則box1必須是box2的前輩元素。
<div id="box1">
<div id="box2">定位元素</div>
</div>
2.參照元素必須加入position:relative；
上例中，#box1{position: relative}
3.定位元素加入position: absolute
同理，上例中#box2{position: absolute}
