本文原文地址：http://www.cnblogs.com/releaseyou/archive/2009/04/16/1437456.html
盒模型有两种，分别是标准盒子模型和IE盒子模型。
先来看看标准盒子模型：
标准盒模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
再来看看IE盒子模型
IE盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE盒子模型的 content 部分包含了 border 和 pading。
例：
<div style="200px; height:50px; padding:10px; margin:20px; border:1px solid #000;"></div>
如果用标准盒子模型
那么这个盒子需要占据的位置为：宽 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标准，所以一般都用标准盒子模型。
使用标准盒子模型，只需要在页面最开始加入DOCTYPE声明即可：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
加上之后，所有浏览器都会按W3C标准去解析盒子模型。
否则，各个浏览器会按照自己的标准去解析（IE自然就是解析成IE盒子模型了）
此外，Jquery 的 boxModel 属性可以用来判断目前所用的盒子模型，代码如下：
var sBox = $.boxModel ? "标准W3C" : "IE";
document.write("您的页面目前支持：" + sBox + "盒子模型");