CSS中盒模型是非常核心的一个概念，类似现实生活中的收纳。
盒模型的知识点包括有width、height、padding、margin(及它的水平居中功能)、border、border-radius、overflow、box-sizing、box-shadow、outline这些知识点，W3chool都有解释，一个个查来用就好了，我这里就不讲了，我讲讲盒模型中容易混淆的几个问题。
（一）盒模型的理解
W3School的Box Model 图解
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容（element）就是盒子里装的东西；而填充(padding又叫内边距)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框（border）就是盒子本身了；至于边界(margin又叫外边距)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。
在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。
在 CSS 中，width 和 height 指的是内容区域（element）的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，以下是CSS代码：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
下图是对上面CSS代码的解释：
CSS盒模型解释
（二）两种模式的盒模型
不考虑css3的情况，盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。
（1）标准模式就是我上面介绍的
盒子的宽高width/height=内容宽高,也就是box-sizing:content-box;的时候。
（2）怪异模式
如果html的头文件第一行的DOCTYPE缺失则在IE9，IE8，IE7，IE6下将会触发怪异模式（quirks 模式）。
这个时候盒子的宽高width/height=内容宽高+padding+border。也就是box-sizing:border-box;的时候这时盒子的宽高相当于标准模式下的内容的宽高了，找个图给你看看。
怪异模式在右边
一般没有DTD定义，浏览器会自动促发quirks模式，但是测试了，发现，IE10及其他标准浏览器，都不会促发怪异模式，IE9，IE8，IE7，IE6会促发，
（三）CSS3属性box-sizing
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；当设置为box-sizing:border-box时，将采用怪异模式解析计算；不过box-sizing:border-box常常用来设置响应式布局使用。
目前使用此属性需要前缀如下:
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
为了加深理解box-sizing的意思，我这里收集了一个考题来帮助大家理解。
题目：
已知这样一段HTML：
<div class="a"><div class="b"></div></div>
如果应用了这样一段CSS：
.a{ width:100px; padding:10px; box-sizing:border-box; }.b{ width:100%; height:10px; background-color:red; }
问：那么红色区域的宽度为
A.110px ;B.120px;C.100px;D.80px
解：这题考的是盒模型的怪异模式，也就是当盒模型定义的box-sizing:border-box;的时候，.a的width=内容宽度+padding+border。所以.a的真正内容区的宽度是80px，所以子元素.b:width:100%,就是父元素内容区的宽度，是80px。所以选D。
另外加深些难度，如果.b加一个样式，就是padding:10px;这以后红色区域的宽度又是多少呢？
总结：盒模型的这个知识点是必须要掌握的，以后我还会帖些更多这类似的考题，被background着色的绘制区域到底宽度高度如何，是很基础也是很难的知识点，也是常常容易被忽视的知识点。
网友评论