css的盒子模型與hack技術

先看下面這個圖，這是FireBug下看到的某個標籤(Div)的佈局圖，前端工程師一定不陌生吧。
[img]http://dl.iteye.com/upload/attachment/297224/a1c0f9c6-afa6-3eb6-b82d-a2bf2ce7257d.jpg[/img]

對於div佈局，該圖對應的屬性爲：
border：邊框
padding:內邊距(也稱之爲”內膽”)
marging:外邊距
width:寬
height:高
position:位置
z-index:z(zoom)
其它的標籤，可以以此內推，稱之爲CSS+Div佈局的”盒子模型”。
對於FF：一個Div的width值=實際的寬度值+padding值+border值。
而IE6: Div的width值有時是不包括border值的，所以很容易產生頁面佈局的混亂，所以這是造成要做頁面瀏覽器兼容測試一個原因。
Position爲頁面元素的定位方式，z-index爲頁面元素的顯示層次值。

對於不同瀏覽器下，頁面的顯示會有不同的問題，所以有了針對瀏覽器兼容性的CSS hack技術，即：
IE6，IE7，IE8能識別*，FF不能識別*
IE6能識別*，不能識別 !important
IE7能識別*，也能識別!important
FF不能識別*，但能識別!important
例：
IE6，IE7 識別*width：10px，FF識別width：10px
當然，IE6，IE7也是識別width：10px的。
IE7，FF識別 width：10px !important，但IE6是不識別的。
另外IE6對下劃線“_”也是能識別的，但IE7和FF是不識別的。
所以，在書寫CSS時，帶“*，!important”和不帶符號的屬性的書寫順序是有技巧的^_^。
附CSS瀏覽器兼容表： http://www.div-css.com/f/info/css-hack-list.gif