1.CSS盒模型 ? border+margin+padding+content

? ? ?網頁由多個盒子組成。

? ? IE6的盒模型的bug：背景色不能穿透邊框，而且如果不設置爭取的doctype的話，ie6顯示的盒子也不是標準的盒子。

2. 邊框：邊框可以被背景色穿透，邊框包括三部分可以進行設置：邊框的寬度、邊框的顏色、邊框的樣式。可以分別分開設置，也可以進行合寫進行統一設置。

注意：去掉圖片的邊框的寫法：（在某些老的瀏覽器中圖片是默認有邊框）

｛border：0 none；｝

3. 內邊距：內邊距是設置盒子與子盒子之間的距離。（上 右 下 左）

? 外邊距：外邊距設置兄弟元素之間的距離。（上 右 下 左）

行內元素的margin，padding只能在水平方向起作用，垂直方向沒有作用。

4. 浮動

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

b. 浮動布局方式：

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

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

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

c. 浮動的特性：

1) 浮動脫離標準流，不占位置，但會影響標準流。浮動只有左右浮動。

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

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

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

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

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

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

d.overflow:

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

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

比如：浮動也可以觸發bfc，再有：定位、overflow、display：table、table-cell...

e. 版心： 版心就是，網站的核心展示區域，一般居中顯示。版心寬度一般是：

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

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

Clear：left;清除左浮動，

清除右浮動: clear:right;

清除左右浮動：clear:both;

6. 定位：默認的文檔流的布局的方式決定了元素的位置就是靜態的定位方式。Static。

相對定位：relative

絕對定位：absolute

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

Zindex越大，越靠近用戶。

頁面zindex規劃案例：

一般的zindex都會在100區間內；如果是頁面比較頂部的用200區間的；如果是廣告，那么需要最頂部，則是300區間。

8.CSS背景設置

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

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

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

? ? ? ? ? ? background-attachment: fixed;

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

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

background-image: url(bgimage.gif);

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

? ? ? ? ? ? ? ? ?背景圖片會蓋住背景顏色。也就是說：背景圖片的優先級要高于背景色

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

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

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

background合寫的順序： 背景顏色、背景圖地址、平鋪設置、背景圖滾動、背景圖位置。

9.CSS精靈圖

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

?10. 消除inline-block的空隙

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

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

2) 使用margin負值。

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

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

5) 使用float的方式