基本知识:
语法:box-sizing
取值:border-box | content-box | padding-box
说明:这个元素的功能是改变容器盒子模型的组成方式。
举例:
1:代码
css 部分:
#div1{
width: 100px;height: 100px;
border:10px solid red;
padding: 20px;
background-color: yellow;
box-sizing: border-box;
}
.div2{
width: 100px;height: 100px;
border:10px solid green;
padding: 20px;
background-color: pink;
box-sizing: content-box;
}
.div3{
width: 100px;height: 100px;
border:10px solid lightgray;
padding: 20px;
background-color: blue;
box-sizing: padding-box;
}
HTML部分
<div id="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
2:截图
这两个可以看出它们盒子模型下的区别。
3:解释说明
由于我的谷歌浏览器,目前没有支持padding-box;由此可以看出content-box,它是把border(边框)和padding(内边距)的值不计算到width之内;而border-box,它是把边框和内边距的值全都计算到了width内,导致宽度减小。
总结
border-box它是IE传统的盒子模型,它内容实际的宽高是:内容的宽度包含了你所设置的边框(border)和内边距(padding)值;而对于content-box它的值就是默认值,在浏览器下实际宽高是:内容+内边距+边框+外边距;对于border-box;在div+css布局中具有很好的利用效果,可以改变由于加大padding值导致容器撑大而打乱布局的尴尬。但是box-sizing有局限性,对于浏览器有兼容性。