W3C规定的盒模型如下：
我们现在从外往内依次说明，最外层是margin，即外边距；往里是border，即边；继续往里是padding，即内边距；最里层是content，即内容区域；width和heigh是content的宽和高。
用一个比喻来形容盒模型非常贴切。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型浅析</title>
<style>
.container{
border: 1px solid black;
width: 300px;
}
.div1{
height: 100px;
margin: 50px;
padding: 20px;
border: 1px solid red;
}
.innerDiv{
height: 100%;
width: 100%;
background: #d3d3d3;
}
</style>
</head>
<body style="margin:0;padding:20px;">
<div class="container">
<div class="div1">
<div class="innerDiv">
贵重物品
</div>
</div>
<div class="div1">div2</div>
</div>
</body>
</html>
页面中有个div叫container，它里面有两个div，都叫div1，其中一个div1里包含一个innerDiv，实际显示结果如下。把container看做一个仓库的话，把两个div1就是仓库中的两个盛东西的纸箱子，innerDiv就是纸箱子里的贵重物品。那么margin就是箱子距离仓库的墙或者其它箱子的距离，boder就是纸箱子纸的厚度，content就是箱子里的贵重物品（innerDiv），在存放贵重物品时，箱子里还会加一层塑料泡沫来保护物品，padding即泡沫的厚度。
有的同学可能发现一个问题，两个div1都设置了边距为50px，它俩之间的距离是不应该是100px吗？
还是用上面那个比喻，箱子之间的距离设为50px,两个箱子的距离自然就是50px，不会是100px。
可以这么去理解，但是肯定不能这么解释。两个div1的距离为50px是边距重叠合并的结果，重叠合并有一套规则，不了解的同学可以百度一下。
上面就是W3C的盒模型了。IE的盒模型与W3C标准盒模型区别就在于：
W3C盒模型的width和height是content的宽和高；
IE盒模型的width和height是（border+padding+content）的宽和高。
有一个属性box-sizing可设置使用哪种盒模型：
box-sizing:content-box;即使用W3C标准盒模型，
box-sizing:border-box;即使用IE盒模型。
关于盒模型的讲解就到这，有疑问的可以给我留言。