浏览器的盒子模型 Box Model
盒子模型(Box Mode)是CSS中一个重要的概念，对于网页中的大部分对象，实际呈现形式都是一个盒子形状对象，理解了盒子模型才能更好的排版。对于盒子，我们最关心的就是盒子的尺寸：丫的要占多大地皮？
其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型，他们对盒子模型的解释各不相同，简单理解一下，方便我们了解为何IE这么让人痛苦，为何要为IE写一堆HOCK。这里再顺便鄙视一下，IE总是与标准对着干。
W3C家的盒子
从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
那么，假设：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，用标准 W3C 盒子模型解释，那么：
这个盒子需要占据的位置为
宽=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px
高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px
盒子的实际大小为
宽 = border*2 + padding*2 + content.width = 1*2+10*2+200=222px、
高 = border*2 + padding*2 + content.height = 1*2+10*2+50=72px；
IE家的盒子
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的content 部分包含了 border 和 pading
那么，假设：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，用标准 W3C 盒子模型解释，那么：
这个盒子需要占据的位置为
宽=margin*2 +content.width = 20*2+200=240px、
高= margin*2 + content.height = 20*2+50=70px;
盒子的实际大小为
宽 = content.width = 200px
高 = content.height = 50px
选择自己想要的盒子
当margin,padding,border都为0时，两种盒模型是没有区别的，这个时候我们不用考虑使用哪种盒模型。可是，如果一定要选择一种盒模型呢，选择哪种？不用我说，大家也会选择标准的盒子，毕竟大家对IE的怨恨已经达到一定程度了。但是，怎么选择W3C标准的盒子呢？
在新建html文档时，大家可能没有注意到其html标签上面的Doctype声明，只要加上Doctype声明，浏览器就会采用W3C盒子标准去解释你的盒子了。
这里有一点小疑惑，刚看了一下 Google 首页是没有用 Doctype声明的。
测试你的盒子
jQuery 为我们提供了检测盒子模型的对象 boxModel 使用其我们可以很方便的检测当前浏览器采用的是哪种盒子模型，让我们一起来试一试吧。^_^
检测地址：
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2010/03/02/1715/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
CSS是我一直以来不怎么会的东东，学习啦
（PS：最近换空间和域名了，麻烦更新一下我的链接为：www.ihacklog.com)
[回复]
这个很基本，可惜我学了还是不太会
[回复]
@要饭的
是啊，很基础的东西，不过我也不会。所以才学。呵呵。
[回复]
这个技术文章 我就是凑热闹看不懂！
[回复]
这个要好好看哈
[回复]
:cool: 每次写之前都加上*{margin:0;padding:0;}
然后就好办多了,哈哈
[回复]