CSS盒模型详解
本文由 小茗同学 发表于 2016-11-26 浏览(1691)
最后修改 2018-05-03 标签:css 盒模型 css3

前言

我喜欢把复杂问题简单化,把简单问题更简单化,看到网上介绍CSS盒模型的文章写那么多,觉得还是有必要自己再总结一下。

CSS3出现以前

首先,CSS3之前,关于盒模型有这两种,一种是W3C标准盒模型,一种是IE盒模型(低版本IE或者缺少!DOCTYPE会触发此模式)。

  • 所谓W3C标准盒模型,就是实际内容宽度等于设置的宽高度(不包括paddingborder);
  • 所谓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盒模型,但是这种模型反而更加常见。