流動模型

流動是預設的網頁佈局格式，預設情況下HTML元素都根據該模式來分佈網頁內容。
該模型下有兩個特徵元素

塊狀元素

顧名思義，他是一個方塊，
- 塊狀元素在預設情況下於包含元素中自上而下垂直排布。
- 預設情況下，寬度為100%，所以實際上塊狀元素都獨佔一行。

高度寬度、行高以及頂和底邊距都可設定。

內聯元素（行內元素）

• 內斂元素會在所處的包含元素中自左到右水平分佈顯示。
• 和其他元素都在一行上
• 元素的寬度、高度及頂和底邊距不可設定

內聯塊狀元素

當元素被設定position:absolute; float:left; float:right;時，元素的display

層模型

顧名思義，該模型就是一層一層的。類似與photoshop中圖層的定義。
可以讓元素在網頁中精準定位
CSS中定義了一組定位屬性來支援層佈局模型
- 絕對定位(position:absolute;)
- 相對定位(position:relative;)
- 固定定位(position:fixed;)

絕對定位

將元素從文件流中拖出來，然後用left、right、top、bottom屬性相對於其最接近

此處的left、right、top、bottom的意思是margin-left、margin-right、margin-top、margin-bottom

相對定位

相對定位完成的過程是首先按static（float）方式生成一個元素（並且元素像層一樣浮起來），然後相對於以前的位置移動，移動的方向還是由left、right、top、bottom屬性決定。

偏移前的位置保持不變，即不影響後續元素的位置。因為相對定位的元素實際上還在標準文件流中原有位置，別的元素無法佔據。

固定定位

與絕對定位absolute相似，但是它的相對移動座標是檢視（螢幕內的網頁視窗）本身。由於檢視本身是固定的，所以他不隨瀏覽器視窗的滾動條的滾動而變化。
典型應用：網頁中右下角的小廣告

relative和absolute結合使用

一般情況下，相對定位和絕對定位相結合。但是需要遵循以下規範：
- 參照定位的元素必須是相對定位元素的前輩元素
- 參照定位的元素必須加入position:relative;
- 定位元素加入position:absolute;使用left、right、top、bottom來進行偏移定位。

浮動模型

利用float:left/right;讓元素脫離標準文件流，處於一種浮動的狀態。該元素後邊的普通元素位置會上移。