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

浏览数：115 / 时间：2015年06月09日

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

原理：

先说说我们在网页设计中常听的属性名：内容(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{
								width: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>

运行结果: