css佈局模型

1，清楚了CSS 盒模型的基本概念、 盒模型類型， 咱們就能夠深刻探討網頁佈局的基本模型了。佈局模型與盒模型同樣都是 CSS 最基本、 最核心的概念。 但佈局模型是創建在盒模型基礎之上，又不一樣於咱們常說的 CSS 佈局樣式或 CSS 佈局模板。若是說佈局模型是本，那麼 CSS 佈局模板就是末了，是外在的表現形式。 
CSS包含3種基本的佈局模型，用英文歸納爲：Flow、Layer 和 Float。
在網頁中，元素有三種佈局模型：
一、流動模型（Flow）
二、浮動模型 (Float)
三、層模型（Layer）

2，流動模型

第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，由於在默認狀態下，塊狀元素的寬度都爲100%。實際上，塊狀元素都會以行的形式佔據位置。

第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）

3，浮動模型

塊狀元素這麼霸道都是獨佔一行，若是如今咱們想讓兩個塊狀元素並排顯示，怎麼辦呢？不要着急，設置元素浮動就能夠實現這一願望。

3,層模型

什麼是層佈局模型？層佈局模型就像是圖像軟件PhotoShop中很是流行的圖層編輯功能同樣，每一個圖層可以精肯定位操做，但在網頁設計領域，因爲網頁大小的活動性，層佈局沒能受到熱捧。可是在網頁上局部使用層佈局仍是有其方便之處的。下面咱們來學習一下html中的層佈局。

如何讓html元素在網頁中精肯定位，就像圖像軟件PhotoShop中的圖層同樣能夠對每一個圖層可以精肯定位操做。CSS定義了一組定位（positioning）屬性來支持層佈局模型。

層模型有三種形式：

（1）絕對定位(position: absolute)

（2）相對定位(position: relative)

(3)固定定位(position: fixed)