1.CSS盒模型 ? border+margin+padding+content
? ? ?網(wǎng)頁(yè)由多個(gè)盒子組成。
? ? IE6的盒模型的bug：背景色不能穿透邊框，而且如果不設(shè)置爭(zhēng)取的doctype的話，ie6顯示的盒子也不是標(biāo)準(zhǔn)的盒子。
2. 邊框：邊框可以被背景色穿透，邊框包括三部分可以進(jìn)行設(shè)置：邊框的寬度、邊框的顏色、邊框的樣式?？梢苑謩e分開(kāi)設(shè)置，也可以進(jìn)行合寫進(jìn)行統(tǒng)一設(shè)置。
注意：去掉圖片的邊框的寫法：（在某些老的瀏覽器中圖片是默認(rèn)有邊框）
｛border：0 none；｝
3. 內(nèi)邊距：內(nèi)邊距是設(shè)置盒子與子盒子之間的距離。（上 右 下 左）
? 外邊距：外邊距設(shè)置兄弟元素之間的距離。（上 右 下 左）
行內(nèi)元素的margin，padding只能在水平方向起作用，垂直方向沒(méi)有作用。
4. 浮動(dòng)
a. 標(biāo)準(zhǔn)流：標(biāo)準(zhǔn)流就是瀏覽器默認(rèn)布局的方式，也就是從上往下，從左向右的默認(rèn)的排班布局的方式。
b. 浮動(dòng)布局方式：
1) 浮動(dòng)的本質(zhì)：就是解決圖片和文字并排的格式問(wèn)題。
? ? ? ?元素浮動(dòng)后，會(huì)脫離標(biāo)準(zhǔn)流，但是還會(huì)影響標(biāo)準(zhǔn)流的布局。
2) 浮動(dòng)的元素會(huì)不占據(jù)標(biāo)準(zhǔn)流的空間。但是會(huì)影響標(biāo)準(zhǔn)流中的文本的排版。
c. 浮動(dòng)的特性：
1) 浮動(dòng)脫離標(biāo)準(zhǔn)流，不占位置，但會(huì)影響標(biāo)準(zhǔn)流。浮動(dòng)只有左右浮動(dòng)。
2) 浮動(dòng)的元素A排列位置，跟上一個(gè)元素（塊級(jí)）有關(guān)系。如果上一個(gè)元素有浮動(dòng)，則A元素頂部會(huì)和上一個(gè)元素的頂部對(duì)齊；如果上一個(gè)元素是標(biāo)準(zhǔn)流，則A元素的頂部會(huì)和上一個(gè)元素的底部對(duì)齊。
3) 一個(gè)父盒子里面的子盒子，如果其中一個(gè)子級(jí)有浮動(dòng)的，則其他子級(jí)都需要浮動(dòng)。這樣才能一行對(duì)齊顯示。
4) 浮動(dòng)根據(jù)元素書寫的位置來(lái)顯示相應(yīng)的浮動(dòng)。
5) 元素添加浮動(dòng)后，如果沒(méi)有設(shè)置寬高的話，元素會(huì)具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少。也就是具有了包裹性。
6) 浮動(dòng)具有破壞性，元素浮動(dòng)后，破壞來(lái)原來(lái)的正常流布局，造成內(nèi)容塌陷。
注意：解決浮動(dòng)破壞造成高度塌陷的問(wèn)題 ?設(shè)置overflow:hidden;
d.overflow:
當(dāng)盒子內(nèi)的元素超出盒子自身的大小時(shí)，內(nèi)容就會(huì)溢出（IE6除外），這時(shí)如果想要規(guī)范溢出內(nèi)容的顯示方式，就需要使用CSS的overflow屬性。
Overflow可以觸發(fā)元素的BFC，可以讓元素具有獨(dú)立的排版的空間和權(quán)限，在bfc內(nèi)部所有的元素都依據(jù)父元素進(jìn)行排版和布局，所有父元素具有了包裹性，這就是解決高度塌陷問(wèn)題的原理。
比如：浮動(dòng)也可以觸發(fā)bfc，再有：定位、overflow、display：table、table-cell...
e. 版心： 版心就是，網(wǎng)站的核心展示區(qū)域，一般居中顯示。版心寬度一般是：
960px ?980px ?1000px ?1190px ?1200px
5.清除浮動(dòng)：清除浮動(dòng)，就是讓當(dāng)前元素左右兩邊都不存在浮動(dòng)元素的時(shí)候才把元素放到標(biāo)準(zhǔn)流匯中顯示。
Clear：left;清除左浮動(dòng)，
清除右浮動(dòng): clear:right;
清除左右浮動(dòng)：clear:both;
6. 定位：默認(rèn)的文檔流的布局的方式?jīng)Q定了元素的位置就是靜態(tài)的定位方式。Static。
相對(duì)定位：relative
絕對(duì)定位：absolute
7. z-index：可以改變?cè)氐膶盈B位置。
Zindex越大，越靠近用戶。
頁(yè)面zindex規(guī)劃案例：
一般的zindex都會(huì)在100區(qū)間內(nèi)；如果是頁(yè)面比較頂部的用200區(qū)間的；如果是廣告，那么需要最頂部，則是300區(qū)間。
8.CSS背景設(shè)置
background-attachment設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。
注意：scroll：默認(rèn)值。背景圖像會(huì)隨著頁(yè)面其余部分的滾動(dòng)而移動(dòng)。否固定或者隨著頁(yè)面的其余部 ? ? ? ? ? ? 分滾動(dòng)。
? ? ? ? ? ? fixed：固定顯示，相對(duì)于body固定。一般只用于body的背景設(shè)置。
? ? ? ? ? ? background-attachment: fixed;
background-color設(shè)置元素的背景顏色。
background-image設(shè)置元素的背景圖像。
background-image: url(bgimage.gif);
? ? ?注意：url指向一個(gè)相對(duì)路徑，url后面緊跟的是一對(duì)括號(hào)，括號(hào)內(nèi)的是路徑，路徑可以用引號(hào)，也 ? ? ? ? ? ? ? ? ?可以省略，建議省略。
? ? ? ? ? ? ? ? ?背景圖片會(huì)蓋住背景顏色。也就是說(shuō)：背景圖片的優(yōu)先級(jí)要高于背景色
background-position設(shè)置背景圖像的開(kāi)始位置。
background-repeat設(shè)置是否及如何重復(fù)背景圖像，background-repeat屬性定義了圖像的平鋪模式。
background合寫：在一個(gè)聲明中設(shè)置所有的背景屬性。
background合寫的順序： 背景顏色、背景圖地址、平鋪設(shè)置、背景圖滾動(dòng)、背景圖位置。
9.CSS精靈圖
CSS精靈圖可以把多張小圖合并到一張大圖上，然后使用背景定位技術(shù)實(shí)現(xiàn)讓盒子背景顯示大背景圖的一小部分，這就是精靈圖的原理。
?10. 消除inline-block的空隙
行內(nèi)塊之間會(huì)有縫隙，去掉的方法：
1) 去除空格，把代碼放在一行上。
2) 使用margin負(fù)值。
3) 給父級(jí)添加font-size:0；
4) 使用letter-spacing或者word-spacing
5) 使用float的方式
