盒子之间的关系

网页往往都是很复杂的，一个网页可能存在着大量的盒子，并且它们以各种关系相互影响着，下面我们就来讲解一下盒子之间的关系。

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

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

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

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

特别要注意的是，CSS的这些不同布局方式设计的十分精巧，环环相扣。

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

而“标准文档流”又简称“标准流”。所谓标准流就是指在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则

块级元素

li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。Ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。

因此，这类元素称为“块级元素”，即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

行内元素

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

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

标准流就是CSS规定的默认的块级元素和行内元素的排列方式。

为了更好地理解“块级元素”和“行内元素”这里重点介绍在CSS排版的页面中经常使用的<div>和<span>标记。利用这两个标记，加上CSS对其样式的控制，可以很方便的实现各种效果。

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

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

块级元素与行内元素的区别在于块级元素包围的元素会自动换行，而行内元素在它的前后不会自动换行。

此外，<span>标记可以包含于<div>标记中，成为它的子元素，而反过来则不成立，即<span>标记不能包含<div>标记。从div和span之间的区别和联系，就可以更深刻地理解块级元素和行内元素的区别了。