本文介绍了css3中的box-sizing属性,在这之前读者需要预备知识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属性可以有三个值:content-box(defalut),border-box,inherit。
- content-box,border和padding不计算入width之内。
- border-box,border和padding计算入width之内。
- inherit,从父元素继承。
![](http://www.mk2048.com/web_upload/blog_imgs/3/www-yi588-com_imgs_OutliningIndicators_ContractedBlock.gif)
<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>
效果截图:
参考文章:
http://www.runoob.com/cssref/css3-pr-box-sizing.html
本文章为博主原创作品,若需转载请注明出处。