CSS 佈局模型

css包含3種基本的佈局模型即爲元素的3中佈局模型,分別爲 Flow/Float/Layer

Flow(流動模型)

標準文檔流方式，元素從上至下，從左至右！是默認的網頁佈局方式

特色

• 塊狀元素佔據單獨的一行，從上至下排列
• 內聯元素會從左至右排列

Float(浮動模型)

網頁元素可經過設置float屬性值浮動，利用浮動特性佈局

Layer(層模型)

設置網頁元素position來支持層佈局模型

position: static

position 默認值,網頁元素仍然處於標準文檔流中,佔據文檔流中的位置

position: relative

特色：

• 相對於自身原有位置進行偏移
• 仍然處於標準文檔流中
• 隨即擁有偏移屬性和z-index 屬性

position: absolute

特色：

• 創建了以包含塊爲基準的定位（包含塊爲距離其最近設置了定位屬性的上級元素,

若無定位祖先元素，則以HTML元素爲定位元素）

• 徹底脫離了標準文檔流
• 隨即擁有偏移屬性和 z-index 屬性
• 未設置偏移量時，不管是否存在已定位祖先元素，都保持在元素初始位置

position: fixed

特色：

• 徹底脫離標準文檔流
• 隨機擁有偏移屬性和 z-index 屬性
• 不管有無已定位祖先元素，均以瀏覽器窗口爲偏移參照基準
• 位置固定，不會隨滾動條變化
• 未設置偏移量時，仍然在標準文檔流原位置