CSS中Box model分为两种,第一种是W3C的标准盒模型,另一种是IE的盒模型。
1、content-box传统盒模型
content-box 是W3C的标准盒模型模型,范围包括 margin、border、padding、content,并且 content 部分不包含border和padding。
例如:首先设置一个宽和高都为100px的盒子
div {
height: 100px;
width: 100px;
background-color: pink;
}
现在给盒子加上一个10px的padding值:
div {
height: 100px;
width: 100px;
background-color: pink;
padding: 10px;
}
由此可知,传统盒模型的padding会撑大盒子。
再给盒子设置一个5px的border:
div {
height: 100px;
width: 100px;
background-color: pink;
padding: 10px;
border: 5px solid crimson;
}
可见,传统盒模型的border也会撑大盒子
这种撑大盒子的特性会在实际开发中带给我们很多困难,例如我们已经利用浮动或定位排列好了许多模块,现在只需要各个模块的间距大一点,如果用传统盒模型的border或者padding,就会破坏我们之前设置好的布局。这就要用到下边的一种盒模型。
2、border-box盒模型
IE 盒子模型的 content 部分包含了border 和 padding,其内容真正的宽度是(width-padding-boder);
css3中定义了box-sizing属性,可通过此属性来设置是W3C传统盒模型还是IE 盒模型
使用方法如下:
box-sizing: content-box(默认) || border-box;
例子还是上边的100*100的盒子,这次把盒子设置成border-box:
div {
box-sizing: border-box;
height: 100px;
width: 100px;
background-color: pink;
}
然后再次给盒子设置10px的padding:
div {
box-sizing: border-box;
height: 100px;
width: 100px;
background-color: pink;
padding: 10px;
}
由此可见,设置padding盒子不会变大,会使内容区域变小。
再次设置5px的border:
div {
box-sizing: border-box;
height: 100px;
width: 100px;
background-color: pink;
padding: 10px;
border: 5px solid crimson;
}
可见,border也不会撑大盒子,也是往里使内容变小。这种盒子模型就很好的解决了布局中“撑大”盒子的问题。
总结
作为一个前端开发人员来说,“IE”两个字无疑是让人头大的(没错,就是它调不完的兼容性问题)。但是IE提出的border-box盒模型却给开发人员提供了极大的便利性。在实际开发过程中,border-box盒模型的使用比例会比传统的content-box高很多,所以要熟练掌握两种盒模型的使用技巧和特点。尤其是border-box。