CSS——布局模型

標籤：

1.三種布局模型：

　　流動模型Flow

　　浮動模型Float

　　層模型Layer

2.流動模型：

　　預設配置模式。

特點：

　　塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，預設塊狀元素的寬度都為100%，以行的形式佔據位置。

　　內嵌元素都會在所處的包含元素內從左至右水平分布顯示，如a、span、em、strong。

 

3.浮動模型：

　　讓塊狀元素並排顯示的方式。

float: left、right

xxx{float:left;}

 

4.層模型：

　　讓元素在網頁中精確定位的方式。

>三種形式：

　　絕對位置(absolute)、相對定位(relative)、固定定位(fixed)

1>絕對位置：

position: absolute

使元素脫離文檔流，然後使用left、righ、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對位置。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。

2>相對定位：

position: relative

通過lef等屬性確定元素在正常文檔流中的位移位置。左上方為座標原點。

元素位移，但是位移前的位置保留不動，覆蓋不了前面的div沒有位移前的位置。

3>固定定位：

position: fixed

和absolute類似，但它的相對移動的座標是視圖(螢幕內的網頁視窗)本身。

由於視圖本身是固定的，不會隨瀏覽器視窗的捲軸滾動而變化。

除非螢幕中行動瀏覽器視窗的螢幕位置，或者改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內視圖的某個位置，不會受文檔流動影響。

>relative和absolute組合使用：父元素是relative/absolute，定位元素使用absolute。　　

　　

CSS——布局模型