做前端这么久以来，对盒模型的理解只是浮在表面上，没有好好地去总结和测试各浏览器的异同，特别是IE下的各版本。秉承着严谨的治学精神，本人决定体验下各浏览器盒模型的表现。

测试代码：

docType使用HTML5的<!DOCTYPE>

<style type="text/css"> #box{width:100px;height:100px;padding:30px;border:10px solid red;margin:20px;}</style><div id="box"></div>

首先来看下FF下的盒模型

可以看到有4层，从里到外分别对应着width,padding,border,margin。那么FF下盒模型的总宽度offsetWidth是100+60+20=180 px;

内容部分对应着最里层，就是width的值。

我们再看IE下各版本:

IE11:这个版本很像火狐，它的userAgent都说like Gecko,所以不做讨论。

IE10、9、8、7、6盒模型都如下：

这个跟FF一样。

但IE5就很奇葩了，请看：

IE5下总的宽度offsetWidth为100，所以它的内容宽度为width-border-padding，即100-20-60=20px。

结论：就目前市场占有率来说，IE5几乎灭迹，所以盒模型在HTML5文档模式下是统一的，一样的。