css的盒子模型与hack技术

先看下面这个图，这是FireBug下看到的某个标签(Div)的布局图，前端工程师一定不陌生吧。


对于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