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

时间 2019-11-11

标签 div+css div css 两种盒子模型 w3c 栏目 HTML 繁體版

原文原文链接

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

原理：浏览器

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

执行结果:

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

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

（例如如下图）

这就很是清晰了吧。同一时候也说明了W3C盒子包括了content，padding，border三部分。
IE盒子的就不写了，有需要的同窗可以本身试试。眼下大多的网页布局都是用W3C盒子，它的兼容性很好。因此是不二之选。post