关于padding被计算在width中问题——box-sizing相关

前一阵子遇到一个小问题，在同样的样式（主要是宽高边距之类的）条件下，DIV在移动端和PC端的宽度不一样，排除了绝大多数样式的问题，但是有个比较陌生，就是box-sinzing，其实经常看到，只不过没怎么注意过，连具体的值都不知道有哪些，在开发者工具里面试了一下，果然和这个样式有关，因此查了一些资料并记录一下。

盒子模型

首先，盒子模型大家都知道，W3C标准的Box Model由四部分组成——content、padding、border、margin

Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

如果我们给一个应用了标准盒模型的div设置一个宽度，那么，实际上我们设置的是上文提到的content的宽度，也就是下图这个样子

• Element空间高度 = content height + padding + border + margin

还有个不那么“标准”的盒模型，就是IE6以下（也就是处于Quirks怪异模式）的浏览器所使用的，在这种情况下：

• Element空间宽度 = content Width + marg