清楚了CSS 盒模型的基本概念骤铃、 盒模型類(lèi)型绩蜻， 我們就可以深入探討網(wǎng)頁(yè)布局的基本模型了。布局模型與盒模型一樣都是 CSS 最基本弟灼、 最核心的概念。 但布局模型是建立在盒模型基礎(chǔ)之上冒黑，又不同于我們常說(shuō)的 CSS 布局樣式或 CSS 布局模板田绑。如果說(shuō)布局模型是本，那么 CSS 布局模板就是末了抡爹，是外在的表現(xiàn)形式掩驱。 CSS包含3種基本的布局模型，用英文概括為：Flow、Layer 和 Float欧穴。在網(wǎng)頁(yè)中民逼，元素有三種布局模型：
1、流動(dòng)模型（Flow）
2涮帘、浮動(dòng)模型 (Float)
3拼苍、層模型（Layer）
先來(lái)說(shuō)一說(shuō)流動(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)容的疮鲫。
流動(dòng)布局模型具有2個(gè)比較典型的特征：
第一點(diǎn)，塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布弦叶，因?yàn)樵谀J(rèn)狀態(tài)下俊犯，塊狀元素的寬度都為100%。實(shí)際上伤哺，塊狀元素都會(huì)以行的形式占據(jù)位置燕侠。如右側(cè)代碼編輯器中三個(gè)塊狀元素標(biāo)簽(div，h1立莉，p)寬度顯示為100%绢彤。
第二點(diǎn)，在流動(dòng)模型下桃序，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示杖虾。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行）
什么是層布局模型烂瘫？層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣媒熊，每個(gè)圖層能夠精確定位操作，但在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域坟比，由于網(wǎng)頁(yè)大小的活動(dòng)性芦鳍，層布局沒(méi)能受到熱捧。但是在網(wǎng)頁(yè)上局部使用層布局還是有其方便之處的葛账。下面我們來(lái)學(xué)習(xí)一下html中的層布局柠衅。
如何讓html元素在網(wǎng)頁(yè)中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對(duì)每個(gè)圖層能夠精確定位操作籍琳。CSS定義了一組定位（positioning）屬性來(lái)支持層布局模型菲宴。
層模型有三種形式：
1、絕對(duì)定位(position: absolute)
2趋急、相對(duì)定位(position: relative)
3喝峦、固定定位(position: fixed)
