CSS盒子模型原理及应用.pdfVIP

盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两

种，分别是IE盒子模型和W3C盒子模型。他们对盒子模型的解释各不相同，先来

看看我们熟悉的盒子模型：

从上图可以看到W3C盒子模型的范围包括margin、border、padding、content，并且

content部分不包含其他部分。

IE盒子模型

从上图可以看到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=70px，盒子的实际大小为：宽200px、高50px。

那应该选择哪中盒子模型呢？当然是“W3C盒子模型”了。怎么样才算是选择了“

W3C盒子模型”呢？很简单，就是在网页的顶部加上DOCTYPE。如果不加

DOCTYPE，那么各个浏览器会根据自己的行为去理解网页，即IE浏览器会采用IE

盒子模型去解释你的盒子，而FF会采用W3C盒子模型解释你的盒子，所以网页在

不同的浏览器中就显示的不一样了。反之，如果加上了DOCTYPE，那么所有浏览器

都会采用W3C盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。