本文介紹了css3中的box-sizing屬性，在這之前讀者需要預(yù)備知識width的范圍。
瀏覽器的支持情況
| Browser |
Suppored |
Notes |
| Internet Explorer |
Yes |
version 8.0 |
| Mozilla Firefox |
Yes |
29.0
2.0 -moz- |
| chrome |
Yes |
10.0
4.0 -webkit- |
| opera |
Yes |
version 9.5 |
| Safari |
Yes |
5.1
3.2 -webkit- |
box-sizing屬性
box-sizing屬性可以有三個(gè)值：content-box（defalut），border-box屬性。
- content-box，border和padding不計(jì)算入width之內(nèi)。
- border-box，border和padding計(jì)算入width之內(nèi)。
<style>
div{
width:100px;
height:100px;
border:20px solid yellow;
padding:20px;
background:green;
background-clip:content-box;
}
.content-box{
box-sizing:content-box;
}
.border-box{
box-sizing:border-box;
}
</style>View Code
效果截圖：
