1.元素類(lèi)型
元素類(lèi)型有：內(nèi)聯(lián)元素和塊狀元素。
內(nèi)聯(lián)元素的特點(diǎn)：
（1）可以和其他元素在同一行上。
（2）不支持寬高，對(duì)上下margin和padding等樣式的支持也有一定的問(wèn)題。
（3）元素的寬度就是它包含的文字或圖片的寬度。
塊元素的特點(diǎn)：
（1）獨(dú)占一行。
（2）支持所有樣式。
（3）不設(shè)置寬度時(shí)，寬度會(huì)撐滿整行。
2.浮動(dòng) float
屬性值有：left right none inherit
文檔流：文檔中可顯示對(duì)象在排列時(shí)所占的位置。
浮動(dòng)的特征：
（1）塊在一排顯示；
（2）內(nèi)嵌支持寬高；
（3）默認(rèn)內(nèi)容撐開(kāi)寬度；
（4）脫離文檔流；
（5）提升層級(jí)半層。
清除浮動(dòng)的方法：
（1）加高。給浮動(dòng)元素的父級(jí)加上與浮動(dòng)元素相同的高度。
問(wèn)題：擴(kuò)展性不好。
（2）給父級(jí)加上浮動(dòng)。
問(wèn)題：頁(yè)面上所有元素都得加上浮動(dòng)，margin左右自動(dòng)失效。
（3）inline-block清浮動(dòng)。
問(wèn)題：margin左右自動(dòng)失效。
（4）空標(biāo)簽清浮動(dòng)。
問(wèn)題：IE6下有最小高度，解決后，IE6下有2px偏差。
（5）br清浮動(dòng)。

<br clear="all"/>

問(wèn)題：不符合結(jié)構(gòu)-樣式-行為三者分離的要求。
（6）after偽類(lèi) 清浮動(dòng)。（給浮動(dòng)元素的父級(jí)加上 clearfix 標(biāo)簽）

clearfix:after{content:"" display:block;c;clear:both;}

在IE6下還得添加：

clearfix{*zoom:1;}

(6)overflow：hidden 清浮動(dòng)。
問(wèn)題：需要配合寬度或者zoom。
3.BFC（block formatting context）：塊級(jí)元素格式化上下文。
在下列這些情況下會(huì)創(chuàng)建新的BFC
（1）浮動(dòng)元素（不為none時(shí)）；
（2）絕對(duì)定位元素；
（3）表格的單元格；
（4）表格的標(biāo)題；
（5）display:inline-block；
（6）overflow的值不為visible。
4.position
其屬性值有

position:relative\absolute\static\fixed

相對(duì)定位(relative)：（1）本身作為自己的參照物；
（2）不會(huì)使元素脫離文檔流；（元素移動(dòng)后原始位置會(huì)被保留。）
（3）不影響元素本身的特性，如果沒(méi)有定位偏移量，對(duì)元素本身沒(méi)有任何影響；
（4）提升層級(jí)。
絕對(duì)定位(absolute)：（1）使元素完全脫離文檔流；
（2）使內(nèi)嵌元素支持寬高；
（3）塊屬性標(biāo)簽內(nèi)容撐開(kāi)寬度；
（4）如有定位父級(jí)相對(duì)于定位父級(jí)發(fā)生偏移，沒(méi)有定位父級(jí)則相對(duì)于document發(fā)生偏移。
（5）相對(duì)定位一般都是配合絕對(duì)定位元素使用。
（6）能夠提升層級(jí)。
固定定位(fixed)與絕對(duì)定位的特性基本一致，它們的區(qū)別就是固定定位偏移基準(zhǔn)是相對(duì)于屏幕來(lái)定位，絕對(duì)定位是相對(duì)于父級(jí)來(lái)定位，ie6不兼容固定定位。
5.透明度：opacity
透明度范圍：0-1 若是在ie6和ie7下的透明度需加濾鏡，

filter:alpha(opacity=1-100);

6.表格/表單
表格：table 表頭：thead 表主體：tbody tr:表格行
th:元素定義表頭 td:元素定義表格單元
單元格合并：
合并行屬性：

<td rowspan="2"></td>

合并列屬性：

<td colspan="2"></td>

表單/表單元素
form 表單

<form action="填寫(xiě)提交地址"></form>
<input type="" name="" value=""/>

表單元素：
text 文本框 password 密碼 radio 單選
checkbox 復(fù)選 submit 提交 reset 重置
button 按鈕 image 圖片 file 上傳
hidden 隱藏
7.兼容性
1 h5標(biāo)簽兼容問(wèn)題(添加插件)

<script src="路徑"></scrpt>

其中 路徑是JS插件，處理h5標(biāo)簽兼容
2第一塊元素浮動(dòng)，第二塊元素添加margin的值等于第一塊元素，在ie6下會(huì)有間隙問(wèn)題。
解決：（1）不建議這么寫(xiě) （2）用浮動(dòng)解決。
3 ie6下子元素超出父級(jí)寬高，會(huì)把父級(jí)的寬高撐開(kāi)。
解決：不要讓子元素的寬高超過(guò)父級(jí)。
4 p 包含塊元素嵌套規(guī)則。
解決：p標(biāo)簽 td h 標(biāo)簽不要再嵌套塊元素。
5 margin兼容性 margin-top 傳遞 會(huì)出發(fā)BFC haslayout
上下margin 疊壓，盡量使用同一個(gè)方向的margin 比如都設(shè)置top或者bottom.
6display:inline-block
*display:inline;
zoom:1;觸發(fā)haslayout
7 ie6最小高度
解決：overflow:hidden;
ie6最小高度為19px
8 ie6雙邊距：當(dāng)元素浮動(dòng)后，再設(shè)置margin會(huì)出現(xiàn)雙邊距。
解決：display:inline;
9 li元素都浮動(dòng)，li在Ie6,7下會(huì)產(chǎn)生4px間隙。
解決：vertical-align:top;
10 浮動(dòng)元素之間注釋?zhuān)瑢?dǎo)致多復(fù)制一個(gè)文字問(wèn)題，兩個(gè)浮動(dòng)元素之間有注釋或者內(nèi)嵌元素并且和父級(jí)寬度相差不超過(guò)3px。
解決：1 兩個(gè)浮動(dòng)元素之間避免出現(xiàn)內(nèi)嵌或者注釋。
2 與父級(jí)寬度相差3px或者以上。
11 ie6 7父級(jí)元素overflow:hidden 是包不住子級(jí)的relative
解決：將他們放在同等條件下，這對(duì)ie6 7給父級(jí)元素增加相對(duì)定位。
12 ie6 7 下絕對(duì)定位元素父級(jí)寬度是奇數(shù)，絕對(duì)定位元素right和bottom值會(huì)有1px的偏差。
解決：避免父級(jí)寬高出現(xiàn)奇數(shù)。
13 ie6 7下絕對(duì)定位元素和浮動(dòng)元素并列，絕對(duì)定位元素消失
解決：浮動(dòng)元素和絕對(duì)定位元素讓他們兩不處于同級(jí)就可以避免。
14 ie6 input的空隙。
解決：給Input元素增加浮動(dòng)。
15 ie6下輸入類(lèi)型表單控件背景問(wèn)題。
解決方案：設(shè)置

background-attachment:fixed;

8.樣式優(yōu)先級(jí):提升樣式優(yōu)先級(jí)
!important>行間樣式>class>類(lèi)型>默認(rèn)
!important能夠提升樣式優(yōu)先級(jí)權(quán)重。
9.png24兼容
ie6不支持png24的圖片
解決：JS插件（問(wèn)題不能處理body之上png24）

DD_belated PNG.fix("")