一、概念：
旧版的IE浏览器一直用非标准的方法渲染盒模型，而在CSS3中，吸收了IE的做法，是我们可以更方便的控制盒子的表现，这个属性就是box-sizing。
语法
1box-sizing:content-box|border-box;
而Firefox仅支持私有属性：
1-moz-box-sizing:content-box | border-box | padding-box
值
content-box:默认值。width和height值只包括内容区域，不包括border、margin、padding值。此时，盒模型大小是width/height+border-width+margin+padding。
border-box:width和height值包括padding和border部分，但不会包括margin部分。这是在IE中，文档在非标准模式下的处理方式。
padding-box:width和height值包括padding部分，但不包括border和margin部分。这个值不是标准属性值，W3C中没有这个，所以只有firefox支持。
详解
用法很简单：
.box{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
box-sizing
说明firefox尚不支持标准的属性，所以必须要用-moz-前缀，但只有它支持padding-box值。
对于Firefox，-moz-box-sizing不能用于表格的单元格，min-height/max-height在-moz-box-sizing:border-box下也不能生效。
浏览器兼容性IE 8.0+
Opera 7+
chrome 1.0+/Safari 3.0+/webkit 522+
Firefox 1.0+(仅支持私有属性)
注：现在主流的webkit内核浏览器都支持标准的box-sizing语法了，也就是说，不需要-webkit-前缀了。
二、实例：
同时设置宽度都为300px，
得出默认的和box-sizing:content-box效果一致。
border-box是总宽度为300px。
<style type="text/css">
div{ width:300px;border:30px solid #ffaa00; padding:30px; background:#ff0; margin:2px;}
div#div1{-moz-box-sizing:padding-box; -webkit-box-sizing:padding-box;-ms-box-sizing:padding-box;}
div#div2{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;}
div#div3{box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;}
</style>
<body>
<div>【默认】牧羊少年的奇幻的奇幻之旅牧羊少年的奇幻之旅牧羊少年的奇幻之旅牧羊少年的奇幻之旅牧羊少年的奇幻之旅牧羊少年的奇幻之旅</div>
<div id="div1">【padding-box】
牧羊少年的奇幻之旅牧羊少年的奇幻之旅幻之旅牧羊少年的奇幻之旅牧羊少年的奇幻之旅牧羊少年的奇幻之旅牧羊少年的奇幻之旅</div>
<div id="div2">【border-box】
牧羊少年的奇幻之旅牧羊少年的奇幻之旅牧牧羊少年的奇幻之旅牧羊少年的奇幻之旅牧羊少年的奇幻之旅牧羊少年的奇幻之旅</div>
<div id="div3">【content-box】
牧羊少年的奇幻之旅牧羊少年的奇幻之旅牧羊少年的的奇幻之旅牧羊少年的奇幻之旅牧羊少年的奇幻之旅</div>
</body>
