1.CSS盒模型 ? border+margin+padding+content
? ? ?網(wǎng)頁(yè)由多個(gè)盒子組成灯节。
? ? IE6的盒模型的bug：背景色不能穿透邊框，而且如果不設(shè)置爭(zhēng)取的doctype的話(huà)，ie6顯示的盒子也不是標(biāo)準(zhǔn)的盒子。
2. 邊框：邊框可以被背景色穿透召烂，邊框包括三部分可以進(jìn)行設(shè)置：邊框的寬度钞楼、邊框的顏色、邊框的樣式。可以分別分開(kāi)設(shè)置，也可以進(jìn)行合寫(xiě)進(jìn)行統(tǒng)一設(shè)置成肘。
注意：去掉圖片的邊框的寫(xiě)法：（在某些老的瀏覽器中圖片是默認(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ù)元素書(shū)寫(xiě)的位置來(lái)顯示相應(yīng)的浮動(dòng)啤贩。
5) 元素添加浮動(dòng)后待秃，如果沒(méi)有設(shè)置寬高的話(huà)，元素會(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越大，越靠近用戶(hù)黍判。
頁(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合寫(xiě)：在一個(gè)聲明中設(shè)置所有的背景屬性悄谐。
background合寫(xiě)的順序： 背景顏色、背景圖地址库北、平鋪設(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的方式
