css盒模型

什么是盒模型？

目前盒模型分为两种，分别是符合w3c标准的盒模型与IE盒模型，这两种盒模型在网页布局中是有差异的，如果想进行网页的排版就必须了解这两种盒模型；首先我们来了解一下标准的盒模型如下图：

图 -1

从图 -1：来看我们可以很清晰的了解盒模型的基本构造包括：content，padding，border，margin组成；并且content部分不包含其他部分；

图 -2

图 -2：是IE盒子模型的基本构造与标准盒模型基本相同，but 与标准盒模型不同的是对于content部分包含了padding，border部分；

举个栗子：如果一个盒子的 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 盒子模型去解释你的盒子，而其他浏览器会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。如果加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了    (*^__^*) 嘻嘻……。

哇咔咔~ ！以上均为本人个人理解，如有描述不当之处还请大家多多指教啦~