盒模型的宽度，在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 border 与 padding 都包含在 width 之内
W3C标准中的盒模型宽度为内容宽度，不包括内边距padding和边框border
CSS3 的box-sizing属性
共有三个值：content-box padding-box border-box
content-box与以前的W3C标准对盒模型的处理一样
padding-box在指定width时会把padding计算在内
border-box在指定width时，会把border和padding计算在内
<title>无标题文档</title> <style type="text/css"> #div1{ width:100px; height:100px; padding:20px; border: 5px solid #E6A43F; background-color:red; } #div2{ box-sizing:padding-box; width:100px; height:100px; padding:20px; border: 5px solid #E6A43F; background-color:blue; } #div3{ box-sizing:border-box; width:100px; height:100px; padding:20px; border: 5px solid #E6A43F; background-color:yellow; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body>
目前这个属性的使用需要加上特定浏览器的前缀，测试了一下，火狐支持该属性，不需要加前缀