border-sizing属性

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内。

<style type="text/css"> .content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; }

div的大小最后为150px

 .padding-box{ box-sizing:padding-box; -moz-box-sizing:padding-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #186645; background: red; }

div的大小加上了padding，没算上border所以为140px

 .border-box{ box-sizing:border-box; -moz-box-sizing:border-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #3DA3EF; background: yellow; }

div的宽度为100px，为原始的宽度，一般写页面对ui设计好的来说，我们最好使用这个属性，这样对整体布局很有好处，不然，页面很容易出现问题。

</style>

转载于:https://www.cnblogs.com/changqijing/p/7686854.html