布局模型與盒模型一樣都是css最基本、最核心的概念。但布局模型是建立在盒模型基礎之上的，又不同於我們常說的css怒句模式或css布局模版。如果說布局模型是本，那麼css布局模版就是末了，是外在的表現形式。
css包含3種基本的布局模型，用英文概括為：flow/layer/float。
在網頁中，元素有三種布局模型：
下面為大家詳細介紹這三種模型。
流動模型是網頁的預設布局模型，也就是說網頁在預設狀態下的html網頁元素都是根據流動模型來分布網頁內容的。
特徵：
* 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸布局，因為在預設狀態下，塊狀元素的寬度都是100%。實際上，塊狀元素都會以行的形式佔據位置。
* 內聯元素都會在所處的包含元素內從左到右水平分布顯示。
塊狀元素這麼霸道都是獨佔一行，如果我們想讓兩個塊狀元素併排顯示，這時候可以設定元素為浮動模型就ok了。
任何元素在預設情況下是不能浮動的，但可以用css定義為浮動，如div,p,table,img等元素都可以被定義為浮動，**如下：
//兩個div元素一行顯示。
div//也可以一左一右
div#div1
#div2
為了能讓html元素在網頁中精確定位，就像影象軟體photoshop中的圖層一樣可以對每個圖層能夠精確定位操作。css定義了一組定位（positioning）屬性來支援層布局模型。
層模型有三種形式：
* 絕對定位（position：absoulte）：將元素從文件流中拖出來，然後使用left/right/top/bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位，如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。**如下：
移動後
由可以明顯看出，使用層模型的相對位置後，元素偏移錢的位置保留不動
* 固定定位：（position：fixed）：固定定位與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或者改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流影響，這與background-attachment:fixed;屬性功能相同。就像瀏覽網頁時，網頁上的廣告一樣，不會隨滾動條的移動而移動，左下角的一直在螢幕左下角。**如下：
div
CSS 布局模型
一.流動模型 flow 1.首先它是網頁預設的布局方式，有兩個基本的特徵 i.塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100 實際上，塊狀元素都會以行的形式佔據位置。如右側 編輯器中三個塊狀元素標籤 div，h1，p 寬度顯示為100 ii.在流...
CSS布局模型
css包含3種基本的布局模型，用英文概括為 flow layer 和 float。在網頁中，元素有三種布局模型 1 流動模型 flow 2 浮動模型 float 3 層模型 layer 1.流動模型 流動 flow 是預設的網頁布局模式。也就是說網頁在預設狀態下的 html 網頁元素都是根據流動模型...
css布局模型
清楚了css 盒模型的基本概念 盒模型型別，我們就可以深入 網頁布局的基本模型了。布局模型與盒模型一樣都是 css 最基本 最核心的概念。但布局模型是建立在盒模型基礎之上，又不同於我們常說的 css 布局樣式或 css 布局模板。如果說布局模型是本，那麼 css 布局模板就是末了，是外在的表現形式。...