关于CSS里盒子模型的一些感触

 如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin)

如在CSS里定义

#menu {
background: #9cf;
margin: 20px;
border: 10px solid #039;
padding: 40px;
width: 200px;
}

 

 

而对于Windows IE 5.x及更前的版本，把这个盒模型的定义搞错了，它认为：
宽度（width）= 元素内容 + 填充 + 边框
这个确实很容易搞错，很多对于盒模型定义没有深入了解的人也同样容易犯这个错误。

例如：

#menu {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}

 

那么，在IE5.5中div实际内容的宽度将是200px-5px-1px-5px-1px=188px，而在Firefox、Opera及IE 6等浏览器内宽度则是200px。
　　这正是很多新手发现自己定义的页面在不同的浏览器内看会发生错位的原因之一。
　　因此就需要采取一定的弥补措施，一般可以避免同时定义元素的宽度和填充、边框，而将一些定义放到元素的子元素内定义。

 

 

　如果必须同时定义这几个值，也可以使用一些手段来校正这个错误，即俗称的css hack，其基本思想就是为没有错误的浏览器提供一个正确的宽度值，而对IE5.5等有问题的浏览器提供另一个值。

　　例如如下的写法

 

#menu {
padding: 5px;
width:110px;
voice-family: "/"}/"";
voice-family: inherit;
width: 100px;
}
定义中第一个width:110px，是IE 5.5认为的元素的宽度，100px+5px+5px。

voice-family: "/"}/"";
voice-family: inherit;

是CSS2.0中的语音属性，由于Windows IE5.5不完全支持CSS2.0，不识别此属性，因此跳到下一个选择符。但是其他浏览器（包括IE6）会继续解读下面的定义，由于css是“层叠”的，即对于同一个选择符的相同的属性，后面的定义会覆盖掉前面的定义，因此，对于其他的浏览器，#menu的宽度为最后的100px。

 

对于支持!important的浏览器，将接受width:768px，而ie6虽然不支持!important，但是由于其无法解释“ /**/（空注释）”，因此会忽略后面的定义，而ie 5.5却会接受最后定义的width:770px，因此达到修正的目的。