DIV+CSS两种盒子模型（W3C盒子与IE盒子）

在辨析两种盒子模型之前。先简单说明一下什么叫盒子模型。

原理：

先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

这些属性我们能够把它转移到我们日常生活中的盒子（箱子）上来理解。日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

特点：

每一个盒子都有：边界、边框、填充、内容四个属性。

每一个属性都包含四个部分：上、右、下、左。这四部分可同一时候设置。也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又能够理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的。边界就是该盒子与其他东西要保留多大距离。（以上原理与特点摘于百度）

以下这幅图里面，各自是W3C盒子和IE盒子的模型：

大家肯定都能发现。这两种模型总体来说很的相似。由内到外都是content,padding,border,margin。

可是细致看的话，虚线延长出来的部分，分别标注了height和width，可是在W3C中，虚线包围的部分仅仅有content。而在IE中，虚线包围的部分是content+padding+border。

这是最直观的不同。同一时候这也就是这两种模型的最大不同点。
W3C 盒子模型的范围包括 margin、border、padding、content，而且 content 部分不包括其它部分
IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包括了 border 和 padding

用一个样例来实现一下W3C盒子模型:

<html>
		<head>
				<title>盒子模型</title>
				<style>
						#box{
								100px;
								height:100px;
								
								padding:40px;
								
								border:solid 40px green;

								margin:20px;
						}
						div{
								font-size:30px;
								color:red;
								background-color:gray;
								text-align:center;
								
						}
				</style>
		</head>
		<body>
				<div id="box">
						W3C盒子模型
				</div>
		</body>
</html>

执行结果:

这张图仅仅能看到内容和边框。看不到详细的分界线，也就不知道填充（padding）和内容（content）详细的排布。
这里我就顺便介绍一中调试工具，firefox浏览器里面的firebug，对于平时调试网页布局各方面的有非常大的帮助。

调试界面就是这样了。鼠标选中<div>标签，图像就发生变化了。总体布局就非常清晰了。

（例如以下图）

这就非常清晰了吧。同一时候也说明了W3C盒子包括了content，padding，border三部分。
IE盒子的就不写了，有须要的同学能够自己试试。眼下大多的网页布局都是用W3C盒子，它的兼容性很好。所以是不二之选。