在網頁中，元素有三種布局模型
流動模型（flow）
浮動模型（float）
層模型（layer）
流動模型是網頁預設的布局模式。它有兩個特徵
塊狀元素會在所處的包含元素內自上而下按順序垂直延伸分布。
內聯元素都會在所處的包含元素內從左到右水平分布顯示。
##浮動模型（float）
float:left;欄目1欄目2
可以看到，兩個塊級元素（div）併排到一行了。
什麼是層模型，你可以想象一下影象處理軟體ps，它有各種圖層，而每個圖層又能精確定位。
如何對每個圖層精確定位操作，css定義了一組positioning屬性來支援布局模式
層模式有三種形式
絕對定位（position:absolute）
相對定位（position:relative）
固定定位（position:fixed）
為元素設定絕對定位-position:absolute
position:absolute作用：將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位，如果不存在這樣的包含塊，則相對於**body元素，**即相對於瀏覽器視窗
為元素設定相對定位-「position-relative」
它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static（float）方式生成乙個元素（並且元素想畫素層一樣浮動了起來），然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不懂。
為元素設定固定定位-「positon-fixed」
固定定位和絕對定位有些類似，但是固定定位相對的位移的座標是檢視（螢幕內的網頁視窗）。由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小。
CSS的三種布局模式
css常見的三種布局模式有 流動模型 flow 浮動模型 float 層模型 layer 1 塊狀元素自上而下占行 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100 實際上，塊狀元素都會以行的形式佔據位置。2 行內元素從左到右 在流動模型下，內聯元...
CSS布局入門 css
css布局與傳統 table 布局最大的區別在於 原來的定位都是採用 通過 的間距或者用無色透明的gif來控制文布局版塊的間距 而現在則採用層 div 來定位，通過層的margin,padding,border等屬性來控制版塊的間距。分析乙個典型的定義div例子 sample 說明如下 下面是這個層...
CSS布局入門 css
css布局與傳統 table 布局最大的區別在於 原來的定位都是採用 通過 的間距或者用無色透明的gif來控制文布局版塊的間距 而現在則採用層 div 來定位，通過層的margin,padding,border等屬性來控制版塊的間距。分析乙個典型的定義div例子 sample 說明如下 下面是這個層...