前阵子遇到了一个小问题，在相同样式（主要是宽高margin之类）的情况下，移动端和PC上DIV的width尾部的不同，这样就排除了大部分样式问题，但是有一个比较陌生，就是box-sinzing。其实我也经常看到，只是没怎么关注过。具体数值我也不知道。我在工具里面试过，确实和这个风格有关，所以查了一些资料记录一下。盒模型首先，盒模型大家都知道。W3C标准的BoxModel由四部分组成——content、padding、border和margin。每个框由四个部分（或区域）组成，由它们各自的边缘定义：内容边缘、填充边缘、边框边缘和边距边缘。如果我们给一个应用标准盒模型的div设置一个宽度，那么，其实我们设置的就是上面提到的content的宽度，也就是下图Element空间的高度=content高度+padding+border+margin还有一种不太“标准”的框模型，IE6以下的浏览器使用的（即Quirks怪异模式），在这种情况下：元素空间宽度=内容宽度+边距（宽度包括元素内容宽度，borderwidth,andpaddingwidth)这时候如果我们给div设置一个width，就是给元素内容+border+内边距设置一个总值，如图上面的图片都是用下面的代码div{宽度：200px；高度：100px；边距：40px；填充：20px；border:10pxsolidblue;}和box-sizing有什么关系我们可以改变box-sizing的样式这种宽度计算方式有两个属性值：content-box和border-box。默认值为content-box，即标准盒模型。此时的计算公式是width=content的宽度height=content的高度。另一个属性是border-box。它的宽度和高度属性包括内容和内边距和边框，但不包括边距。看到这里，相信大家都已经明白了。我们使用了一个新的属性来重现一个不太“标准”的标准。设置为border-box的元素在计算宽高时使用IE6模式。为什么要“倒转”历史？事实上，我们不能这么说。只是经过一个循环，时间证明了哪种方法更合理。不存在谁对谁错的问题。那么这个计算宽高的模式有什么好呢？举个简单的例子divid="right"class="content_box">右
