盒模型

盒模型由内到外分为内容content、内边距padding、边框border、外边距margin共四层。

根据制定标准的不同，盒模型分为 W3C 标准的标准盒模型和 IE 浏览器使用的怪异盒模型。

标准盒模型与怪异盒模型

标准盒模型与怪异盒模型的不同点在于实际显示大小在计算上的不同。

在标准盒模型下，css 中的height与width属性设置的是内容content的宽高，因此实际盒子显示的宽高=height\width+内边距padding+边框border。
而在怪异盒模型下，css 中的height与width属性设置即是盒子可视区域的宽高，所以内容content的宽高=height\width-内边距padding-边框border。

浏览器默认采用的是标准盒模型（IE 除外），但是可以通过box-sizing属性去设置采用哪种盒模型，content-box对应标准盒模型、border-box对应怪异盒模型。

拓展

以前碰到过一个面试题，问一个盒模型最多能实现几层的同心圆，即盒模型的四层中有几层能够设置颜色。

盒模型的四层中只有content和border能设置颜色。

参考

MDN 手册-盒模型