css3 - box-sizing属性

在css3中，使用box-sizing属性来指定针对元素的宽度和高度的计算方法。

兼容	IE8	Chrome 8	Opera 10	Firefox 4
box-sizing	√	√	√	√

在css中，使用width属性和hight属性来制定元素的宽度与高度。但是使用box-sizing属性，可以指定用width属性和height属性分别指定的宽度值与高度值是否包含元素的内部的补白区域，以及边框的宽度与高度。

值	content-box	border-box
含义	表示元素的宽度与高度不包括内部补白区域，以及边框的宽度与高度	表示元素的宽度与高度包括内部补白区域，以及边框的宽度与高度
书写方法	box-sizing: content-box;/*Opera*/-webkit-box-sizing: content-box;/*Chrome*/-moz-box-sizing: content-box;/*Firefox*/ -ms-box-sizing: content-box;/*IE*/	box-sizing: border-box;/*Opera*/ -webkit-box-sizing: border-box;/*Chrome*/-moz-box-sizing: border-box;/*Firefox*/ -ms-box-sizing: border-box;/*IE*/

html：

<div id="div1">示例文字...示例文字</div>
<div id="div2">示例文字...示例文字</div>

css：

 div {
   width: 300px;
   border: 30px solid #ffaa00;
   padding: 30px;
   background-color: #ffff00;
   margin: 20px auto;
 }
 div#div1 {
   box-sizing: content-box;/*Opera 浏览器*/
   -webkit-box-sizing: content-box;/*Chrome 浏览器*/
   -moz-box-sizing: content-box;/*Firefox 浏览器*/
   -ms-box-sizing: content-box;/*IE 浏览器*/
 }
 div#div2 {
   box-sizing: border-box;/*Opera 浏览器*/
   -webkit-box-sizing: border-box;/*Chrome 浏览器*/
   -moz-box-sizing: border-box;/*Firefox 浏览器*/
   -ms-box-sizing: border-box;/*IE 浏览器*/
 }

解析：
虽然都指定了两个div元素的宽度都是300px,但是在第一个元素使用了box-sizing: content-box;所以元素的内容部分宽度为300px，总宽度为内容宽度（300px）+内部补白宽度padding部分（30px*2）+边框（30px*2）= 420px；
第二个元素使用了box-sizing: border-box;所以元素的总宽度为300px,内容宽度为：总宽度（300px）- 边框（30px*2）-内部补白宽度padding部分（30px*2）=180px；