盒子模型有两种，分别是IE盒子模型和标准w3c盒子模型。它们对盒子模型的解释不同：
标准w3c盒子模型的范围包括 margin、border、padding、content，并且content部分不包括其它部分。
IE盒子模型的范围也包括 margin、border、padding、content，和标准w3c盒子模型不同的是：IE盒子模型的content部分包括了border和padding
例：一个盒子的 margin 为 20px，border 为 5px，padding 为 10px，content 的宽为 200px、高为 50px，假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+5*2+10*2+200=270px、高 20*2+5*2+10*2+50=120px，盒子的实际大小为：宽 5*2+10*2+200=220px、高 5*2+10*2+50=80px；假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=90px，盒子的实际大小为：宽 200px、高 50px。
我们开发一般是选择“标准 w3c 盒子模型”。怎么样才算是选择了“标准 w3c 盒子模型”呢？ 就是在网页的顶部加上 doctype 声明。那么所有浏览器都会采用标准 w3c 盒子模型去解释盒子，网页就能在各个浏览器中显示一致。
添加顶部声明如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "www.w3.org/tr/xhtml1/d…">
在CSS的盒子模型中，有两个重要的选项，box-sizing:content-box和box-sizing:border-box
content-box被称为正常盒子模型，border-box被称为怪异盒子模型
盒子元素模型，会随着padding和border元素的加入，而增加实际占用空间，
border-box定义的盒子，不会随着padding和boder的加入而增大盒子的占用空间
border-box限定了盒子模型的总面积
