一.流動模型：flow
1.首先它是網頁預設的布局方式，有兩個基本的特徵：
i.塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100%。
實際上，塊狀元素都會以行的形式佔據位置。如右側**編輯器中三個塊狀元素標籤(div，h1，p)寬度顯示為100%。
ii.在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）
1.任何元素在預設情況下是不能浮動的，但可以用 css 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。
如下**可以實現兩個 div 元素一行顯示。
height:200px;
border:2px red solid;
float:left;
}id="div1">div>
id="div2">div>
三.層模型
1.如何讓html元素在網頁中精確定位，就像影象軟體photoshop中的圖層一樣可以對每個圖層能夠精確定位操作。
css定義了一組定位（positioning）屬性來支援層布局模型。
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
層模型--固定定位
fixed：表示固定定位，與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。
由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，
或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響，
這與background-attachment:fixed;屬性功能相同。
以下**可以實現相對於瀏覽器檢視向右移動100px，向下移動50px。
並且拖動滾動條時位置固定不變。
使用position:absolute可以實現被設定元素相對於瀏覽器（body）設定定位以後，
大家有沒有想過可不可以相對於其它元素進行定位呢？答案是肯定的，當然可以。
使用position:relative來幫忙，但是必須遵守下面規範：
1、參照定位的元素必須是相對定位元素的前輩元素
id="box1">
id="box2">相對參照元素進行定位div>
div>
從上面**可以看出box1是box2的父元素（父元素當然也是前輩元素了）。
2、參照定位的元素必須加入position:relative;
#box1
3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了#box2
這樣box2就可以相對于父元素box1定位了（這裡注意參照物就可以不是瀏覽器了，而可以自由設定了）。1.塊狀定寬元素
當被設定元素為塊狀元素時用 text-align：center 就不起作用了，
這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。這一小節我們先來講一講定寬塊狀元素。
滿足定寬和塊狀兩個條件的元素是可以通過設定「左右margin」值為「auto」來實現居中的。
我們來看個例子就是設定 div 這個塊狀元素水平居中：
我是定寬塊狀元素，哈哈，我要水平居中顯示。div>
body>
css**
divstyle>
注意：元素的「上下 margin」 是可以隨意設定的。
2.塊狀不定寬
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都比多）：
1.加入 table 標籤
2.設定 display;inline 方法
i.改變塊級元素的 display 為 inline 型別，然後使用 text-align:center 來實現居中效果。
class="container">
href="#">1a>
li>
href="#">2a>
li>
href="#">3a>
li>
ul>
div>
body>
.container
.container
ul .container
li
style>
這種方法相比第一種方法的優勢是不用增加無語義標籤，簡化了標籤的巢狀深度，
但也存在著一些問題：它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些功能，
比如設定長度值。
3.設定 position:relative 和 left:50%;
通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:-50% 來實現水平居中。
父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。
如下**：
class="container">
hi,imooc!
div>
css**：
.container
style>
1.父元素高度確定的多行文字（方法一）
使用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle。
2.父元素高度確定的多行文字（方法二）
在 chrome、firefox 及 ie8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell，
啟用 vertical-align 屬性，但注意 ie6、7 並不支援這個樣式。
class="container">
看我是否可以居中。p>
看我是否可以居中。p>
看我是否可以居中。p>
看我是否可以居中。p>
看我是否可以居中。p>
div>
div>
css**：
.container
style>
這種方法的好處是不用新增多餘的無意義的標籤，但缺點也很明顯，它的相容性不是很好，不相容 ie6、7。CSS布局模型
css包含3種基本的布局模型，用英文概括為 flow layer 和 float。在網頁中，元素有三種布局模型 1 流動模型 flow 2 浮動模型 float 3 層模型 layer 1.流動模型 流動 flow 是預設的網頁布局模式。也就是說網頁在預設狀態下的 html 網頁元素都是根據流動模型...
css布局模型
清楚了css 盒模型的基本概念 盒模型型別，我們就可以深入 網頁布局的基本模型了。布局模型與盒模型一樣都是 css 最基本 最核心的概念。但布局模型是建立在盒模型基礎之上，又不同於我們常說的 css 布局樣式或 css 布局模板。如果說布局模型是本，那麼 css 布局模板就是末了，是外在的表現形式。...
css布局模型
1，清楚了css 盒模型的基本概念 盒模型型別，我們就可以深入 網頁布局的基本模型了。布局模型與盒模型一樣都是 css 最基本 最核心的概念。但布局模型是建立在盒模型基礎之上，又不同於我們常說的 css 布局樣式或 css 布局模板。如果說布局模型是本，那麼 css 布局模板就是末了，是外在的表現形...