[前端回顾] - CSS盒模型

当浏览器渲染HTML文档时,它将每一个元素依据CSS盒模型呈现为一个方形的盒子,每个盒子由4个区域组成,分别是content, padding, border以及margin

Box-model

content区,包含了真实的元素内容,如文本、图像等等。 paddingmargin则分别为内外边距区,border为边界,夹在paddingmargin区域之间。

W3C标准盒模型与IE怪异盒模型

在继续之前,不得不提各类浏览器对于盒模型的实现标准,其中主要分为W3C标准盒模型IE怪异盒模型。大多数浏览器采用W3C盒模型,而IE中采用了自己的标准。

W3C盒模型中,一个块的总宽度 = content宽度 + margin(左右) + padding(左右) + border(左右)
IE怪异盒模型中,一个块的总宽度 = content宽度 + margin(左右)

两者主要区别就是,IE怪异模式盒模型的content区域的宽度包含paddingborder,即其content真实宽度取决于paddingborder的大小,而W3C盒模型content真实宽度是可以仅由width,min-width,max-width进行限定的。

怪异模式

部分浏览器在支持W3C标准盒模型的同时,还保留了原有老版本的解析模式,因此可以通过一定的方法触发这个老版本解析模式。这主要表现在IE内核的浏览器中,当HTML文档中不对DOCTYPE进行定义时,这个模式会被触发。

CSS3 box-sizing

CSS3中引入了新的box-sizing属性,可以用来指定任意元素的盒模型。该属性的默认值为content-box,即W3C盒模型,设定该值为border-box可以使用IE怪异盒模型渲染元素,该属性默认不会继承。

需要注意的是,该属性还有一个padding-box值,不过已经从规范中移除,但是目前Firefox浏览器仍保留了对它的支持,但是不应该再去使用它。

浏览器兼容性

Can I Use box-sizing IE8及以上版本支持该属性,Firefox需要加上-moz-前缀,对于低版本的iOS以及Android浏览器也需要加上-webkit-前缀。通常我们希望整个页面有一个统一的盒模型,正如reset.cssnormalize.css中所作的,通过如下代码统一不同浏览器的盒模型应用:

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

示例

Sample 上图完整的展示了相同widthheight元素在content-boxborder-box模式下的呈现差别。