浏览器的盒子模型 Box Model

盒子模型(Box Mode)是CSS中一个重要的概念，对于网页中的大部分对象，实际呈现形式都是一个盒子形状对象，理解了盒子模型才能更好的排版。对于盒子，我们最关心的就是盒子的尺寸：丫的要占多大地皮？

其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型，他们对盒子模型的解释各不相同，简单理解一下，方便我们了解为何IE这么让人痛苦，为何要为IE写一堆HOCK。这里再顺便鄙视一下，IE总是与标准对着干。

W3C家的盒子

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

那么，假设：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，用标准 W3C 盒子模型解释，那么：

这个盒子需要占据的位置为

宽=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px

高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px

盒子的实际大小为

宽 = border*2 + padding*2 + content.width = 1*2+10*2+200=222px、

高 = border*2 + padding*2 + content.height = 1*2+10*2+50=72px；

IE家的盒子

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的content 部分包含了 border 和 pading

那么，假设：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，用标准 W3C 盒子模型解释，那么：

这个盒子需要占据的位置为

宽=margin*2 +content.width = 20*2+200=240px、

高= margin*2 + content.height = 20*2+50=70px;

盒子的实际大小为

宽 = content.width = 200px

高 = content.height = 50px

选择自己想要的盒子

当margin,padding,border都为0时，两种盒模型是没有区别的，这个时候我们不用考虑使用哪种盒模型。可是，如果一定要选择一种盒模型呢，选择哪种？不用我说，大家也会选择标准的盒子，毕竟大家对IE的怨恨已经达到一定程度了。但是，怎么选择W3C标准的盒子呢？

在新建html文档时，大家可能没有注意到其html标签上面的Doctype声明，只要加上Doctype声明，浏览器就会采用W3C盒子标准去解释你的盒子了。

这里有一点小疑惑，刚看了一下 Google 首页是没有用 Doctype声明的。