1. 浮動

a. 標準流：標準流就是瀏覽器默認布局的方式腌乡，也就是從上往下漩氨，從左向右的默認的排班布局的方式丑念。

b. 浮動布局方式：

1) 浮動的本質：就是解決圖片和文字并排的格式問題爱只。

元素浮動后，會脫離標準流凰兑，但是還會影響標準流的布局妥粟。

2) 浮動的元素會不占據標準流的空間。但是會影響標準流中的文本的排版吏够。

c. 浮動的特性：

1) 浮動脫離標準流勾给，不占位置，但會影響標準流锅知。浮動只有左右浮動播急。

2) 浮動的元素A排列位置，跟上一個元素（塊級）有關系售睹。如果上一個元素有浮動桩警，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流昌妹，則A元素的頂部會和上一個元素的底部對齊捶枢。

3) 一個父盒子里面的子盒子，如果其中一個子級有浮動的飞崖，則其他子級都需要浮動烂叔。這樣才能一行對齊顯示。

4) 浮動根據元素書寫的位置來顯示相應的浮動固歪。

5) 元素添加浮動后蒜鸡，如果沒有設置寬高的話，元素會具有行內塊元素的特性。元素的大小完全取決于定義的大小或者默認的內容多少逢防。也就是具有了包裹性康聂。

6) 浮動具有破壞性，元素浮動后胞四，破壞來原來的正常流布局，造成內容塌陷伶椿。

注意：解決浮動破壞造成高度塌陷的問題 ?設置overflow:hidden;

d.overflow:

當盒子內的元素超出盒子自身的大小時辜伟，內容就會溢出（IE6除外），這時如果想要規(guī)范溢出內容的顯示方式脊另，就需要使用CSS的overflow屬性导狡。

Overflow可以觸發(fā)元素的BFC，可以讓元素具有獨立的排版的空間和權限偎痛，在bfc內部所有的元素都依據父元素進行排版和布局旱捧，所有父元素具有了包裹性，這就是解決高度塌陷問題的原理踩麦。

比如：浮動也可以觸發(fā)bfc枚赡，再有：定位、overflow谓谦、display：table贫橙、table-cell...

e. 版心： 版心就是，網站的核心展示區(qū)域反粥，一般居中顯示卢肃。版心寬度一般是：

960px ?980px ?1000px ?1190px ?1200px

2.清除浮動：清除浮動，就是讓當前元素左右兩邊都不存在浮動元素的時候才把元素放到標準流匯中顯示才顿。

Clear：left;清除左浮動莫湘，

清除右浮動: clear:right;

清除左右浮動：clear:both;

3. 定位：默認的文檔流的布局的方式決定了元素的位置就是靜態(tài)的定位方式。Static郑气。

相對定位：relative

絕對定位：absolute

4. z-index：可以改變元素的層疊位置幅垮。

Zindex越大，越靠近用戶竣贪。

頁面zindex規(guī)劃案例：

一般的zindex都會在100區(qū)間內军洼；如果是頁面比較頂部的用200區(qū)間的；如果是廣告演怎，那么需要最頂部匕争，則是300區(qū)間。

5.CSS背景設置

background-attachment設置背景圖像是否固定或者隨著頁面的其余部分滾動爷耀。

注意：scroll：默認值甘桑。背景圖像會隨著頁面其余部分的滾動而移動。否固定或者隨著頁面的其余部 ? ? ? ? ? ? 分滾動。

fixed：固定顯示跑杭，相對于body固定铆帽。一般只用于body的背景設置。

background-attachment: fixed;

background-color設置元素的背景顏色德谅。

background-image設置元素的背景圖像爹橱。

background-image: url(bgimage.gif);

注意：url指向一個相對路徑，url后面緊跟的是一對括號窄做，括號內的是路徑愧驱，路徑可以用引號，也 ? ? ? ? ? ? ? ? ?可以省略椭盏，建議省略组砚。

背景圖片會蓋住背景顏色。也就是說：背景圖片的優(yōu)先級要高于背景色

background-position設置背景圖像的開始位置掏颊。

background-repeat設置是否及如何重復背景圖像糟红，background-repeat屬性定義了圖像的平鋪模式。

background合寫：在一個聲明中設置所有的背景屬性乌叶。

background合寫的順序： 背景顏色盆偿、背景圖地址、平鋪設置准浴、背景圖滾動陈肛、背景圖位置。

6.CSS精靈圖

CSS精靈圖可以把多張小圖合并到一張大圖上兄裂，然后使用背景定位技術實現讓盒子背景顯示大背景圖的一小部分句旱，這就是精靈圖的原理。

?7. 消除inline-block的空隙

行內塊之間會有縫隙晰奖，去掉的方法：

1) 去除空格谈撒，把代碼放在一行上。

2) 使用margin負值匾南。

3) 給父級添加font-size:0啃匿；

4) 使用letter-spacing或者word-spacing

5) 使用float的方式