CSS3盒大小调整
CSS3的box-sizing属性允许我们，包括在元素的总宽度和高度的填充和边框。
浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
其次是数字-webkit-或-moz-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
如果没有CSS3 box-sizing属性
缺省情况下，元件的宽度和高度被计算如下：
宽+填充+边界=元素的实际宽度
身高+填充+边界=元素的实际高度
这意味着：当您设置元素的宽度/高度，元素经常出现大于已设置（因为该元素的边框和填充被添加到元素的指定宽/高）。
下图显示了两个<div>使用相同的指定宽度和高度元素：
这DIV较小（宽度为300像素，高度100像素是）。
这DIV越大（宽也是300像素，高100像素是）。
这两个<div>上面结了结果中的不同尺寸的元素（因为DIV2已指定填充）：
例
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} 试一试» 所以，很长一段时间的Web开发人员指定比他们想要一个较小的宽度值，因为他们不得不减去了填充和边框。
用CSS3，所述box-sizing属性解决了这个问题。
随着CSS3 box-sizing属性
CSS3的box-sizing属性允许我们，包括在元素的总宽度和高度的填充和边框。
如果设置box-sizing: border-box;上的元素填充和边界都包含在宽度和高度：
两者的div和现在相同的大小！
万岁！
下面是同样的例子，上面用box-sizing: border-box;加入两个<div>元素：
例
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} 试一试» 由于使用的结果box-sizing: border-box;如此好，很多开发者希望在其页面上的所有元素，以这种方式工作。
下面的代码确保所有元素都在这个更直观的方式大小。 很多浏览器已经使用box-sizing: border-box;许多表单元素（但不是全部-这就是为什么投入和文本区域在宽度显得与众不同：100％）。
运用这所有的元素是安全和明智的：