首页 > 代码库 > 3.5 盒子之间的关系
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”。
这个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，应该如何放置这些内容。
(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”。
通过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
其执行的结果如图4所示。<div>标记的3条语句被分在了3行中，而<span>标记的语句没有换行。
此外，<span>标记可以包含于<div>标记中，成为它的子元素，而反过来则不成立，即<span>标记不能包含<div>标记。从div和span之间的区别和联系，就可以更深刻地理解块级元素和行内元素的区别了。 点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/670.html |
