前言
我喜欢把复杂问题简单化,把简单问题更简单化,看到网上介绍CSS盒模型的文章写那么多,觉得还是有必要自己再总结一下。
CSS3出现以前
首先,CSS3之前,关于盒模型有这两种,一种是W3C标准盒模型,一种是IE盒模型(低版本IE或者缺少!DOCTYPE
会触发此模式)。
- 所谓W3C标准盒模型,就是实际内容宽度等于设置的宽高度(不包括
padding
和border
); - 所谓IE盒模型,就是实际内容宽度等于设置宽高度减去
padding
+border
;
怎么样,够简单吧,看个例子:
<style>
.test {
width: 200px;
height: 160px;
background: #B0F9FF;
border: solid 10px #2196F3;
padding: 20px;
}
</style>
<div class="test">这是W3C标准盒模型</div>
再看IE盒模型:
CSS之后
CSS3
新增一个名叫box-sizing
的属性,它两个值:
- 当设置
box-sizing:content-box
时,将采用W3C标准盒模型解析,默认为content-box
; - 当设置
box-sizing:border-box
时,将采用IE盒模型解析;
为避免不同盒模型带来布局的差异,一般在开发刚开始就应该把盒模型确定下来,否则会带来致命性的布局错乱,bootstrap
直接强制给所有元素强制设置为border-box
:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
:before, :after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
所以可以看到,虽然名字叫IE盒模型
,但是这种模型反而更加常见。