两种盒子模型

盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。

1.标准盒子模型

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

IE盒子模型

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。
举个例子：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，如果用标准 W3C 盒子模型解释，那么这个盒子需要占据的位置为：宽 202 12 102 200=262px、高 202 12102 50=112px，盒子的实际大小为：宽 12 102 200=222px、高 12 102 50=72px；如果用IE 盒子模型，那么这个盒子需要占据的位置为：宽 202 200=240px、高 20*2 50=70px，盒子的实际大小为：宽 200px、高 50px。
一般我们选择W3C盒子模型，也就是标准的盒子模型，需要在网页的顶部加上DOCTYPE声明。