两种盒子模型

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是IE盒子模型和标准W3C盒子模型，他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：


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

从上图可以看到IE盒子模型的范围也包括margin、border、padding、content，和标准W3C盒子模型不同的是：IE盒子模型的content部分包含了border和pading。
例：一个盒子的margin为20px，border为1px，padding为10px，content的宽为200px、高为50px，假如用标准W3C盒子模型解释，那么这个盒子需要占据的位置为：
宽20*2+1*2+10*2+200=262px、高20*2+1*2+10*2+50=112px
盒子的实际大小为：
宽1*2+10*2+200=222px、高1*2+10*2+50=72px
假如用IE盒子模型，那么这个盒子需要占据的位置为：
宽20*2+200=240px、高20*2+50=90px
盒子的实际大小为：
宽200px、高 50px
那应该选择哪中盒子模型呢？当然是“标准W3C盒子模型”了。怎么样才算是选择了“标准W3C盒子模型”呢？很简单，就是在网页的顶部加上doctype声明。假如不加doctype声明，那么各个浏览器会根据自己的行为去理解网页，即IE浏览器会采用IE盒子模型去解释你的盒子，而FF会采用标准W3C盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了doctype声明，那么所有浏览器都会采用标准W3C盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了