CSS包含3種基本的布局模型,分別是Flow、Layer和Float.
在網頁中,元素有三種布局模型:流動模型(Flow)、浮動模型(Float)和層模型(Layer)
流動模型
流動(Flow)是默認的網頁布局模式。
也就是說網頁在默認狀態下的HTML網頁元素都是根據流動模型來分布網頁內容的。
典型特征
1.塊狀元素都處在所處的包含元素內自上而下按順序垂直延伸分布,因為在默認狀態下,塊狀元素的寬度都為100%
2.在流動模型下,內聯元素都會在所處的包含元素內從左到右水平分布顯示。
浮動模型
通過CSS設置塊狀元素的float屬性,可以將多個塊狀元素顯示在同一行。如float:left;
層模型
通過CSS設置position屬性,來實現層布局模型。
層模型有三種形式:絕對定位(absolute)、相對定位(relative)和固定定位(fixed)。
一、絕對定位 position:absolute
將元素從文檔流中拖出來,然后使用left、rigth、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對于body元素,即相對于瀏覽器窗口。
二、相對定位 position:relative
通過left、rigth、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來),然后相對于以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。
三、固定定位 position:fixed
fixed:表示固定定位,與absolute定位類型類似,但它的相對移動的坐標是視圖(屏幕內的網頁窗口)本身。由于視圖本身是固定的,它不會隨瀏覽器窗口的滾動條滾動而變化,除非你在屏幕中移動瀏覽器窗口的屏幕位置,或改變瀏覽器窗口的顯示大小,因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置,不會受文檔流動影響,這與background-attachment:fixed?屬性功能相同。
relative與absolute組合使用
1、參照定位的元素必須是相對定位元素的前輩元素
2、參照定位的元素必須加入position:relative;
3、定位元素加入position:absolute,便可以使用top、bottom、left、right來進行偏移定位了