知識點：
1.掌握三大布局技巧——流式布局、浮動布局及絕對定位布局；
2.精通標準文件流、盒子模型、float屬性以及position屬性等知識。
w3c
由全球資訊網聯盟制定的一系列標準：1.結構化標準語言（html和xml）
2.表現標準語言（css）
3.行為標準語言（dom和ecmascript）
css三種定位機制：標準文件流 浮動和絕對定位
標準文件流特點：從上到下，從左到右，輸出文件內容；由塊級元素和行級元素組成
塊級元素會獨佔一行,預設情況下,其寬度自動填滿其父元素寬度.行內元素不會獨佔一行,相鄰的行內元素會排列在同一行裡,直到一行排不下,才會換行,其寬度隨元素的內容而變化. 另外
塊級元素可以設定width,height屬性.
行內元素設定width,height屬性無效，它的長度高度主要根據內容決定.
塊級元素即使設定了寬度,仍然是獨佔一行.
塊級元素標籤：div ul li dl dt p ....
行級元素標籤：span strong img input ....《大部分表單元素是行級標籤》
盒子模型三維圖：
第一層：border
第二層：centent+padding
第三層：background-img
第四層：background-color
第五層：margin
如果想讓頁面自動居中，當設定margin屬性為auto的時候，不能再設定浮動或絕對定位屬性。
浮動定位機制
使元素脫離文件流，脫離文件流的意思就是，正常的文件流中丟失了它的位置。父元素在高度自適應的情況下，由於浮動丟失了子元素的高度，父元素就無法被撐開，所以導致父元素的背景、邊框等屬性無法生效，也會使後面的元素頂上來。我們使用浮動一般是為了讓塊級元素實現行級元素的特性，但也不希望浮動元素影響後面的元素位置，當浮動失去文件流，使後面的元素頂上來以後，一般有三種方法可以處理：
1、為父元素增加height屬性，這樣父元素就會顯示邊框、背景等，但這種情況是確定浮動元素的高度時才這麼做，但是實際中，可能不清楚高度哦
2、為浮動元素後面的元素增加clear:both，清除浮動效果，如果沒有後面元素的話，增加乙個元素。
3、為父元素設定overflow:hidden屬性
絕對定位布局，通過設定position屬性實現。
css中規定的第三種定位機制，能夠實現橫向多列布局及較為複雜的定位。
比如：帶有遮罩層效果的提示框、固定層效果、全屏廣告等等。
position屬性：
擁有3種定位形式：1、靜態定位 2、相對定位 3、絕對定位
可設定4個屬性值：
static（靜態定位）
relative（相對定位）
absolute（絕對定位）
fixed（固定定位）
position:relative:被看作普通流定位模型的一部分，定位元素的位置相對於它在普通流中的位置進行移動。使用相對定位的元素不管它是否進行移動，元素仍要佔據它原來的位置。移動元素會導致它覆蓋其他的框。position:absolute：絕對定位的元素位置是相對於距離它最近的那個已定位的祖先(相對/絕對)元素決定的。 如果元素沒有已定位的祖先元素， 那麼它的位置相對於初始包含塊。絕對定位的元素可以在它的包含塊向上、下、左、右移動。與相對定位相反， 絕對定位使元素與文件流無關， 因此不佔據空間。 普通文件流中其他的元素的布局不受絕對定位元素的影響。
position:fixed
相對於瀏覽器視窗，其餘的特點類似於絕對定位。
一 採用絕對定位實現橫向兩列布局的情況一列為固定寬度，另一列寬度自適應的情況；
二 應用小貼士：
relative-對父元素進行相對定位
absolute-對需要自適應寬度的元素進行絕對定位
注意！固定寬度列的高度大於自適應寬度的列高度。
常用布局（浮動布局 絕對定位布局 聖杯布局）
常用布局 1.流式布局 2.浮動布局 3.絕對定位布局 4.聖杯布局 body 浮動布局 header bd footer main leftside right 絕對定位布局 header bd footer leftside main right 聖杯布局 header main bd foot...
絕對定位布局
position屬性設定，能夠實現橫向多列布局及較為複雜的定位，比如帶有遮罩層效果的提示框 固定層效果 全屏廣告等。position擁有3種定位形式 1 靜態定位 2 相對定位 3 絕對定位。position可以設定4個屬性值 1 static 靜態定位 2 relative 相對定位 3 abso...
CSS 浮動布局與定位布局
布局常用的方法 用float設計浮動布局 float預設值為none,可根據頁面需要設定為左浮動left，或右浮動right 瀏覽器中效果 因為 div 是區塊元素，每個 div 獨佔一行，要想讓三個 div 在同一行裡顯示，就需要給三個子元素設定浮動，但浮動會使元素脫離文件流，父元素高度崩塌，所以...