box-sizing属性可以为三个值之一:content-box(默认),border-box,padding-box,inherit(继承父级box-sizing 属性的值。)
content-box,border和padding不计算入width之内
padding-box,padding计算入width内
border-box,border和padding计算入width之内
兼容性
IE8+以上才兼容
使用时:
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <style type="text/css"> 2 .content-box{ 3 box-sizing:content-box; 4 -moz-box-sizing:content-box; 5 width: 100px; 6 height: 100px; 7 padding: 20px; 8 border: 5px solid #E6A43F; 9 background: blue; 10 } 11 .padding-box{ 12 box-sizing:padding-box; 13 -moz-box-sizing:padding-box; 14 width: 100px; 15 height: 100px; 16 padding: 20px; 17 border: 5px solid #186645; 18 background: red; 19 } 20 .border-box{ 21 box-sizing:border-box; 22 -moz-box-sizing:border-box; 23 width: 100px; 24 height: 100px; 25 padding: 20px; 26 border: 5px solid #3DA3EF; 27 background: yellow; 28 } 29 </style>