box-sizing

原文：http://zh.learnlayout.com/box-sizing.html

经过了一代又一代人们意识到数学不好玩，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：

.simple {  width: 500px;  margin: 20px auto;  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;}.fancy {  width: 500px;  margin: 20px auto;  padding: 50px;  border: solid blue 10px;  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;}

<div class="simple">

我们现在一样大小了！

</div>

<div class="fancy">

万岁！

</div>

既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：

* {  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;}

这样可以确保所有的元素都会用这种更直观的方式排版。

既然 box-sizing 是个很新的属性，目前你还应该像我之前在例子中那样使用 -webkit-和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+。