了解CSS盒状模型设计更佳网页

Ralf_Jones 2006-11-23

展开全文

了解CSS盒状模型设计更佳网页
Builder, Melonfire
7/9/2006
URL: http://www./developer/webdevelop/story/0,3800067013,39526726,00.htm

层叠样式表（CSS）已逐渐成为HTML布局与定位的实际标准。它们易于使用，不需要任何特殊软件，并可在大多数主要浏览器中正常运行。但是，它的这种极度简化特点也会产生危险：许多网络开发新手并没有充分了解CSS就在使用CSS定位与布局指导。在出现意外的结果后，这些网络开发新手倾向于用反复试验的方法解决问题，而没有对其基本原理进行分析。在一些浏览器上，用这种方法建立的布局能够正常运行；但在另一些浏览器上却会出错。

为减少这些问题，值得花时间来了解CSS的一些核心驱动器与概念。开发者能够理解的最重要的概念之一为所谓的CSS“盒状模型”，它是大多数CSS布局与定位的基础。本文简单介绍这种盒状模型，说明它的功能以及如何应用它来定位HTML元素，设计出更优秀的网页。

CSS盒状模型以一个包含四个成分的有界限的盒子来描述网页中的每个元素：

元素内容(content)本身位于中心。
一个补丁(padding)封套位于内容周围。
边框(border)包围补丁，它为元素的可见区域划分界线。
边缘(margin)包围边框。

盒状模型的四个成分的直观图如图A所示。

图A

CSS盒状模型的四个成分

从上图可看出：很明显，在考虑一个元素占用多少网页空间时，仅考虑元素本身的宽和高是不够的，还必须考虑元素的补丁、边框与边缘的宽和高。这一事实，虽然稍稍经过思考就已经很明显，但却是许多网络开发新手没有意识到的问题之一；实际上，也是许多网页元素重叠，或是其它网页元素没有相应调整大小的原因。

要了解它的实际应用，请看一个示例。如下面的HTML代码（列表A）：

列表A

<!doctype html public "-//W3C//DTD HTML 4.0//EN">

<html>

<head>

#box {

？width: 350px;

？border-color: red;

？border-style: dashed;

}

</style>

</head>

<body>

This is text outside the box. At veroeos et accusam et justo duo dolores et ea rebum. Stet clitakasdgubergren, no sea takimatasanctusestLoremipsum dolor sit amet.

This is text inside the box. Loremipsumdolor sitamet, consetetursadipscingelitr, seddiamnonumyeirmodtemporinviduntutlabore et dolore magna aliquyamerat, seddiamvoluptua.

</div>

</body>

</html>

这是一个相当简单的页面——两段文字，一段在<div>之内，一段在<div>之外。<div>内部的文字指定了一个红色的虚线框，使盒状模型更易于理解。这里整个盒子的宽为350像素。下面就是这个盒子的外观（图B）：

图B

例1

接下来，我们增加一些补丁（列表B）：

列表B

#box {

width: 350px;

border-color: red;

border-style: dashed;

padding: 10px;

}

图C显示的输出结果：

图C

增加的补丁

如你所见，在文字四个边上增加的补丁已将元素内容与边框间的空间加大了10个像素。现在盒子的整个宽为350+10+10=370像素。

然后，我们再增加边框的厚度（列表C）：

列表C

#box {

width: 350px;

border-color: red;

border-style: dashed;

padding: 10px;

border-width: 15px;

}

下面是输出的结果（图D）：

图D

加厚的边框

产生的差异立即可见。盒子的新宽度为370+15+15=400像素。

边框为元素的可见区域划分界线。其他元素位于这个元素的边框以外。如果你希望增加网页上两个元素之间的间距，就必须借助盒子的第三层：边缘。请看下面的代码（列表D），它为元素的顶边框增加一个40像素的边缘：

列表D

#box {

width: 350px;

order-color: red;

border-style: dashed;

padding: 10px;

border-width: 15px;

margin-top: 40px;

}

在这种情况下，<div>上面的一行文字与<div>的外边框间又另外增加了40个像素的距离。图E为输出结果。

图E

顶边缘增加

当然，由于只有边缘顶部增加，盒子的宽度仍为400像素。但是，盒子的高度增加了40个像素。如果你喜欢使用统一的边缘，应用如下的代码（列表E），它将盒子的所有边缘增加40个像素：

列表E

#box {

width: 350px;

border-color: red;

border-style: dashed;

padding: 10px;

border-width: 15px;

margin: 40px;

}

得到的结果如下（图F）：

图F

各边增加边缘

现在，盒子的总宽度为400+40+40=350+10+10+15+15+40+40=480像素。

如上面的例子所示，给内容增加边缘、边框和补丁会占用大量的页面空间，比内容本身占用的空间要多得多。因此，在网页上定位元素时，彻底了解盒状模型以及它对相邻元素的影响，对于网页元素的准确布局大有帮助。

当然，上面的提示仅仅是冰山的一角。欲了解更多盒状模型的信息，请阅读正式的W3C规范。值得注意的是，多数现代浏览器以上面描述的方式使用CSS盒状模型；但是，较老版本的Netscape和Internet Explorer以非标准的方式运行CSS盒状模型，这时就需要对代码进行相应的调整，以对网页进行精确布局。

希望你不会对上面的说明感到枯燥，现在你应该明白你频繁应用的CSS指令的基本原理了。祝编码快乐！