最近重新看css相关的问题，这里真理一下看书的笔记。
盒子模型是一个标准。
首先我一直将css理解为一个大盒子，大家就这么往里面放东西，理论上这个盒子按照一层来放，但是盒子一排能放多少东西就有了影响位置的一些因素，比如这个盒子中用来装东西的位置宽高（content），盒子本来的那个壳(border)，盒子的那个壳距离能放内容的宽高（padding），以及每个盒子之前的距离（margin） 。因为有这么多的因素都可能会导致这个盒子的位置变化，加上浏览器种类繁多，难免会出现一些误差。
比如：IE5.X 和 6 的非标准模式中，他规定盒子的宽度width = content+padding+margin
w3c的标准中 元素的宽度width=content宽度，元素总的占位置=width+padding+margin
这样就导致了设置一个div 的width有了两种不同的解析方法，出现浏览器兼容的问题。
盒子模型就是约定在某个标准下面约定如何去计算一个元素占的位置一种标准。
当然在后来的css里面新增一种box-sizing属性。
首先可以看一下定义box-sizing：content-box|border-box|inherit
content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box:为元素设定的宽度和高度决定了元素的边框盒。元素的任何内边框和外边框将在设定的宽度和高度内进行绘制。意思是通过已设定的宽度和高度分别减去外边框和内边框才能得到内容的宽度和高度。
inherit:继承这里不解释了。
如上通过内容已经看到，貌似和上面对应的非标准和标准模式很相似对不对。惊不惊喜，意不意外。