3.5 盒子之间的关系 / 憋错料

读者要理解前几节的内容并不困难，因为都只涉及一个盒子内部的关系。而实际网页往往是很复杂的，一个网页可能存在着大量的盒子，并且它们以各种关系相互影响着。

要把一个盒子与外部的其他盒子之间的关系理解清楚，并不是简单的事情。在很多CSS资料中大都通过简单的分类，就CSS本身的介绍来说明这个问题，往往只是就事论事。如果不能从站得更高的角度来理解这个问题，那么想真正搞懂它是很困难的，因此这里尝试从更深入的角度来介绍CSS与HTML的关系，希望对读者的理解有所帮助。

为了能够方便地组织各种盒子有序的排列和布局，CSS规范的制定者进行了深入细致的考虑，使得这种方式既有足够的灵活性，以适应各种排版要求，又能使规则尽可能简单，让浏览器的开发者和网页设计师都能够相对容易地实现。

CSS规范的思路是，首先确定一种标准的排版模式，这样可以保证设置的简单化，各种网页元素构成的盒子按照这种标准的方式排列布局。这种方式就是接下来要详细介绍的“标准流”方式。

但是仅通过标准流方式，很多版式是无法实现的，限制了布局的灵活性，因此CSS规范中，又给出了另外若干种对盒子进行布局的手段，包括“浮动”属性和“定位”属性等，这些内容将在下一章中详细介绍。

需要特别提醒读者注意的是，CSS的这些不同的布局方式设计得非常精巧，环环相扣，在后面所有章节中，都是以这些基本的方法和原理为基础的，因此即使是对CSS有一些了解的读者，也应该尽可能仔细地阅读第3章和第4章的内容。把里面的所有实验案例都亲自动手调试一下，这对于深刻理解其中的原理，将会大有益处。lodidance.com

一、HTML与DOM

这里首先介绍DOM的概念。DOM是Document Ohject Model的缩写，即“文档对象模型”。一个网页的所有元素组织在一起．戟构成了一棵“DOM树”。

假没有一个HTML文档，其中的CSS样式部分省略了，这里只关心它的HTML结构。这个网页的结构非常简单，代码如下，示例文件位于网页学习网CSS教程资源“第3章\04.htm”。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页教学网-盒子模型的演示</title>
<style type="text/css">
body{
margin:0 0 0 0;
font-family:宋体;
font-size:12px;
}
ul {
background: #ddd;
margin: 15px 15px 15px 15px;
padding: 5px 5px 5px 5px;
/* 没有设置边框 */
}
li {
color: black; /* 黑色文本 */
background: #aaa; /* 浅灰色背景 */
margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/
padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */
list-style: none /* 取消项目符号 */
/* 未设置边框 */
}
li.withborder {
border-style: dashed;
border-width: 5px; /* 设置边框为2像素 */
border-color: black;
margin-top:20px；
}
</style>
</head>
<body>
<ul>
<li>第1个列表的第1个项目内容</li>
<li class="withborder">第1个列表的第2个项目内容，内容更长一些，
目的是演示自动折行的效果。</li>
</ul>
<ul>
<li>第2个列表的第1个项目内容</li>
<li class="withborder">第2个列表的第2个项目内容，内容更长一些，
目的是演示自动折行的效果。</li>
</ul>
</body>
</html>

这个HTML在IE和Firefox浏览器中的显示效果是一样的，如图1所示。

图1 在IE与FireFox中的显示效果

为了使读者能够直观地理解什么是“DOM树”，请读者使用Firefox浏览器打开这个网页，然后选择菜单命令“工具—>DOM查看器”（如果没有可自行添加扩展DOM Inspector，或者使用IE 8 的管理工具也可看到类似效果），这时会打开一个新窗口，如图2所示。

图2 DOM查看器

窗口左侧列表中的“#document”是整个文档的根节点，双击这个项目，就会打开或关闭它的下级节点，每一个节点都可以打开它的下级节点，直到该节点本身没有下级节点为止。

图2中显示的是所有节点都打开的效果。这里使用了一棵“树“的形式把一个HTML文档的内容组织起来，形成了严格的层次结构。例如在本例中，body是浏览器窗口中显示的所有对象的根节点，即ul、Ii等对象都是body的下级节点：同理，li又是ul的下级节点。在这棵“DOM树”上的各个节点，都对应于网页上的一个区域，例如用鼠标在“DOM查看器”上单击-li节点．立即可以在浏览器窗口中看到一个红色的矩形框，闪烁若干次，如图2所示，表示该节点在浏览器窗口中所占的区域，这正是前面所说的CSS“盒子”。

到这里，我们已经和CSS“盒子”联系起来了。读者务必要理解，一个HTML文档并不是一个简单的文本文件，而是一个具有层次结构的逻辑文档，每一个HTML元素（例如p、ul、Ii等）都作为这个层次结构中的一个节点存在。每个节点反映在浏览器上会具有不同的表现形式，具体的表现形式正是CSS来决定的。

到这里又印证了一个几乎所有CSS资料中都会提及的一句话：“CSS的目的是使网页的表现形式与内容结构分离，CSS控制网页的表现形式，HTML控制网页的内容结构”，现在读者应该可以更深刻地理解这个原则了。

接下来，就需要理解CSS如何为各种处于层次结构中的元素设置表现形式。

二、标准文档流

这里又出现了一个新的概念——“标准文档流”，或简称“标准流”。所谓标准流，就是指在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。

仍然以上面的网页为例，只观察从body开始的这一部分，其内容是body中有两个列表( ul)．每个列表中各有两个列表项目(li)。一共有4层结构，顶层为body．第2层为ul，第3层为li，第4层为li中的文本。这4种元素又可以分为以下两类。

1.块级元素(block level)

li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列．不会排在同一行中。因此，这类元素称为“块级元素”( block level)，即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

2.行内元素(inline)

对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”(inline)。

比如<strong></strong>标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。再比如，最常用的<a>标记．也是一个行内元素。

注意：行内元素在DOM树中同样是一个节点。从DOM的角度来看，块级元素和行内元素是没有区别的，都是树上的一个节点；而从CSS角度来看，二者有很大的区别，块级元素拥有自己的区域，行内元素则没有。

标准流就是CSS规定的默认的块级元素和行内元素的排列方式。那么具体是如何排列的呢？这里读者不妨把自己想象成一名浏览器的开发者，来考虑一下对一段HTML，应该如何放置这些内容。

<body>
<ul>
<li>第1个列表的第1个项目内容</li>
<li class="withborder">第1个列表的第2个项目内容，内容更长一些，
目的是演示自动折行的效果。</li>
</ul>
<ul>
<li>第2个列表的第1个项目内容</li>
<li class="withborder">第2个列表的第2个项目内容，内容更长一些，
目的是演示自动折行的效果。</li>
</ul>
</body>

(1) 第一步

从body标记开始，body元素就是一个最大的块级元素，应该包含所有的子元素。依次把其中的子元素放到适当的位置。例如上面这段代码中，body包含了两个ul．就把这两个块级元素竖直排列。至此第一步完成。

(2) 第二步

分别进入每一个ul中，查看它的下级元素，这里是两个li．因此又为它们分别分配了一定的矩形区域。至此第二步完成。

(3) 第三步

再进入li内部，这里面是一行文本，因此按照行内元素的方式，排列这些文字。

如果一个HTML更为复杂，层次更多，那么依然是不断地重复这个过程，直至所有的元素都被检查一遍。该分配区域的分配区域，该设置颜色的设置颜色，等等。伴随着扫描的过
程，样式也就被赋予到每个元素上了。

在这个过程，一个一个盒子自然地形成一个序列，同级别的兄弟盒子依次排列在父级盒子中，同级父级盒子又依次排列在它们的父级盒子中，就像一条河流有干流和支流一样，这就是被称为“流”的原因。

当然实际的浏览器程序的计算过程要复杂得多，但是大致的过程是这样的，因为我们并不打算自己开发一个浏览器，所以不必掌握所有的细节，但是一定要深入理解这些概念。

三、<div>标记与<span>标记

为了能够更好地理解“块级元素”和“行内元素”，这里重点介绍在CSS排版的页面中经常使用的<div>和<span>标记。利用这两个标记，加上CSS对其样式的控制，可以很方便地实现各种效果。本节从二者的基本概念出发，介绍两个标记，并且深人探讨两种元索的区别。

<div>标记早在HTML 3.0时代就已经出现，但那时并不常用，直到CSS的普及，才逐渐发挥出它的优势。<span>标记在HTML 4.0时才被引入，它是专门针对样式表而设计的标记。

<div>( division)简单而言是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。可以把<div>与</div>中的内容视为一个独立的对象，用于CSS的控制。声明时只需要对<div>进行相应的控制，其中的各标记元素都会随之改变。

一个ul是一个块级元素，同样div也是一个块级元素，二者的不同在于ul是一个具有特殊含义的块级元素，具有一定的逻辑语义，而div是一个通用的块级元素，用它可以容纳各种元素，从而方便排版。

下面举一个简单的例子，示例文件位于网页学习网CSS教程资源“第3章\05.htm”。

<html>
<head>
<title>网页教学网-div 标记范例</title>
<style type="text/css">
div{
font-size:18px; /* 字号大小 */
font-weight:bold; /* 字体粗细 */
font-family:Arial; /* 字体 */
color:#FFFF00; /* 颜色 */
background-color:#0000FF; /* 背景颜色 */
text-align:center; /* 对齐方式 */
width:300px; /* 块宽度 */
height:100px; /* 块高度 */
}
</style>
</head>
<body>
<div>
这是一个div标记
</div>
</body>
</html>

通过CSS对<div>块的控制，制作了一个宽300像素、高100像素的黄色区块，井进行了文字效果的相应设置，在IE中的执行结果如图3所示。

图3 div块示例

<span>标记与<div>标记一样，作为容器标记而被广泛应用在HTML语言中。在<span>与</span>中间同样可以容纳各种HTML元素，从而形成独立的对象。如果把“<div>”替换成“<span>”，样式表中把“div”替换成“span”，执行后就会发现效果完全一样；可以说<div>与<span>这两个标记起到的作用都是独立出各个区块，在这个意义上说二者没有不同。

<div>与<span>的区别在于，<div>是一个块级元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素(inline elements)，在它的前后不会换行。<span>没有结构上的意义．纯粹是应用样式，当其他行内元素都不合适时，就可以使用<span>元素。

例如有如下代码。lodidance.com