css佈局模型

css包括3種基本的佈局模型，即flow，layer，float。

在網頁中元素有三種佈局模型：

1.流動模型（float）

2.浮動模型（float）

3.層模型（layer）

下面分別介紹下這三種模型到底是什麼佈局？

1.流動模型：流動是默認的網頁佈局模式，也就是說網頁在默認狀態下的html網頁元素都是根據流動模型來分佈網頁內容的。

流動模型具備兩個比較典型的特徵：

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

2.在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。

塊狀元素這麼霸道的獨佔一行，那麼問題來了，若是咱們想讓兩個塊狀元素並排顯示，該怎麼辦呢？不要捉急，設置元素浮動就能夠實現這一願望。

任何元素在默認狀況下是不能浮動的，但能夠用css定義爲浮動。

3.層模型

什麼是層佈局模型？層佈局模型就像ps中的圖層編輯功能同樣，每一個圖層可以精肯定位操做。

層模型有三種形式：

1.絕對定位（position：absolute）：將元素從文檔流中拖出來，使用left，right，top，bottom屬性相對於其最接近的一個具備定位屬性的父包含塊進行絕對定位，若是不存在 該包含快，則相對於body元素，即瀏覽器窗口。

2.相對定位（position：relative）：它經過left，right，top，bottom屬性肯定在正常文檔流中的偏移位置。相對定位完成的過程當中首先按照static（float）方式生成一個元素（而且元素像層同樣的浮動起來），而後相對於之前的位置移動，移動的方向和幅度由left，right，top，bottom屬性肯定，偏移前的位置保留不動。

3.固定定位（position：fixed）：固定定位相對移動的座標是視圖（屏幕內的網頁窗口）自己，因爲視圖自己是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，所以固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響。