CSS3中的box-sizing属性
box-sizing属性是css3中新添加的属性，用来替换原来的css盒子模型，box-sizing属性值的不同，元素的高度和宽度的计算方法也不同。
/* box-sizing的三个属性值，我们只针对前两个说明 */ box-sizing: content-box; box-sizing: border-box; box-sizing: padding-box;
在默认情况下，设置的width和height属性都是指元素内容（content box）的高度和宽度，如果这个元素设置了border或padding的话，那么整个元素的高度和宽度就是：
totalWidth = border-left + padding-left + width + padding-right + border-right totalHeight = border-top + padding-top + height + padding-bottom + border-bottom
所以，这个在做相应式设计的时候还是比较复杂的，现在，有了box-sizing属性，就可以根据不同的属性值计算元素的高度和宽度。
content-box：这是默认情况，根据这个属性值的名字也能大概猜出会是什么情况，整个元素的高度和宽度其实就是上面的两个公式border-box：这种情况下，你设置的width和height属性值就是针对整个元素，包括了border，padding，和元素内容。
简单的例子
CSS
.box {
width: 150px;
height: 150px;
padding: 50px;
border: 5px solid blue;
background-color: orange;
}
.box1 {
box-sizing: content-box;
}
.box2 {
box-sizing: border-box;
}HTML
<div class="box box1">
content-box
</div>
<div class="box box2">
border-box
</div>代码中，我们对两个div设置了相同的height、width、border和padding，可是现实效果却完全不同：
我们仔细分析下，两个div不同的地方在于box-sizing属性，第一个是content-box，第二个是border-box，针对第一个div，
我们发现，整个元素的高度和宽度是260x260，而元素的内容的高度和宽度是150x150，正好是我们想要的，对于260这个大小是怎么来的，我们不妨计算一下：
5+50+150+50+5=260 // 高度 5+50+150+50+5=260 // 宽度
正好是260，符合最上面的两个公式，所以最后元素的尺寸是260x260，并不是我们设置的150x150
对于第二个div：
很明显可以看到，第二个div里面的内容已经被挤了换行了，这个div的真实的高度和宽度和我们设置的一样，可以它的内容部分的尺寸只有40x40，远小于150，可以看到，这就是content-box和border-box的区别了，再来计算一下：
150 = 5+50+40+50+5 // 高度 150 = 5+50+40+50+5 // 宽度
可知，整个元素的高度其实是包括了border、padding和内容的高度，宽度也是如此。
浏览器的兼容性
- 桌面端
- 手机端
可以看到，不管是手机端还是桌面端大部分都是不支持padding-box的，所以建议实际开发中避免使用padding-box。
跟多详细内容请参考：https://developer.mozilla.org...