网页中“流动”与“定位”之间的区别

   在关于网页设计的文章中，“流动”和“定位”是我们见到的两个非常常用的词汇，这些概念到底是什么？他们之间如何区别？让我们阅读和了解他们在一个典型的HTML网页中工作和交户的的基本技巧。

 

表格及先于表格的...

起初，表格被用来创建视觉化的网格单元以控制和显示类似科学结果的表格式数据。当网站开始扩大时就需要更好的设计，对于比较复杂的布局表格成为首选工具，它被用来包含和组织被切割的布局图片以生成漂亮的网页。有时候，这些布局表格以一种复杂的方式彼此镶嵌，这对于屏幕阅读者和搜索引擎都会产生问题。

在此之前，有一种简单的布局类型称之为“流”，在每一个html页面，“流”仍然发挥作用，因此全面理解它的工作原理不失为一个好主意。首先要注意的是所有正常流的页面元素都被假设拥有一个static的定位属性，但是你不必定义该属性，它是默认的。此外，当一个元素是静态时，它经常被描述成“无定位”属性的元素，即使所有的元素拥有一个定位属性。当一个元素被定位时，通常意味着它拥有absolute, relative 或 fixed  属性值，不要混淆“static”和“fixed”而范常识性错误。

因此，所有流动元素都是静态定位的，虽然它们有时被“相对”定位（文章的后面将会涉及到）。现在假设流动元素是默认状况下的静态。

 

Block和Inline

   虽然称之为流，实际上是两种类型：block和inline。通常情况下页面元素是“块级元素”和“内联元素”中的一种，不可能同时出现。它们是两种完全不同的显示方式，每一个都有特定的用途。在css声明中，它们可以分配定位属性。但是，现实中最好不要尝试定位内联元素，因为在IE中的会得到不一致行为，这种状况最终会伴随IE浏览器引擎的升级而得到改进。

Block

   这种类型的流并不复杂，所有块元素默认情况下与包围它的容器一样宽，它们总是在垂直方向上排列，一个接一个，除非你通过相对偏移或负边距强迫它偏离正常位置而改变排列。（我将谈及到，暂且按下不表）

图1 段落是块元素，在垂直方向等宽排列	图2 块元素不关心自己的宽度，它们在文档流中始终保持水平位置上的空间

图1表明一系列的块元素在垂直方向上是如何堆叠的，即使它们的宽度小于包含元素的自然宽度也不发生变化。块元素包括p，div，ul，ol，li等一系列元素，这个简单的列表表明那些是块元素那些是内联元素。表格是一个例外，它能在垂直方向上堆叠但不能自动扩展填充被包含元素，反而自动收缩以包裹它内部的元素，因此，如果希望它的行为像其他的块元素一样，你必须定义的宽度为100％。但是需要注意，因为任何一边的边框或者是补丁都加在100％的宽度之上，不同于通常状况下的块元素拥有一个默认的“auto”宽度。

图2中是同样的段落，但它们都无一例外的减少了宽度，并且交替使段落拥有大的左边距，这样段落被挤到右边。尽管它们在垂直方向上是明显分开了,但是它仍新起一行显示而不是紧挨着排列。

 

如果你并列的定位或浮动两个或更多的包含元素，那么每一个都有自己的流，完全从其它的流中独立出来。事实上，每个表格单元格内部都有自己的流，表格作为一个整体跟在它之前的或之后的任何块级元素排列。

 

Inline

   所有块级元素都新起一行，内联元素通常保持在同一行中，任何内容都直接嵌在他们之前。大多数内联元素是一些简单的文本，实际上许多标签（<img>，<span>，<em>等）也是内联的。

   内联元素并排堆叠，从左边延伸到右边，每一个新的内联元素都能被浏览器解析到。当包含元素水平上的空间不足以容纳下一个内联元素时，那么这个元素将下沉移到容器下一行的最左侧，依次类推。需要注意的是，有些语言的阅读习惯是从右边开始的，在这种情况下，css有特定的属性能反转正常的从左到右的内联流方向。

当浏览器对给定的一行耗尽内联元素时，或需要新起一行时，那么在一行中的所有元素的高度是可以测量的，这样就创建了一个“内联盒子”，它的高度是最高元素的高度，这个盒子被周围的元素重重包裹，它不可见，你可以给一个包裹一系列内联元素的span标签添加背景色看到它。

图3 文本和图片在一行上，他们排列在浏览器创建的一个不可见的基线上，内联盒子

是可以初级的，示图中为了清晰可见而分开了。

浏览器每次创建的内联盒子都被添加到前一个的下面，因此内联盒子的行为类似块元素，尽管管理他们的属性有所不同。例如，内联盒子中的文本并不在盒子的底部而是在所谓的基线位置，通常基线在底部位置上的几个像素。凡是带有下沉字目的字符（例如小写字母g底部的钩子）当允许这些字符的主体保持一致时，都有空间提供给此类下沉字目。

更多关于文本和修改其显示的css属性，请看Westciv 的文本布局属性。

 

需要记住几点：

你不能创建一个特定的内联盒子，它们被浏览器严格的用来组织成组的内联元素。内联盒子的宽度总是容器占据的全部宽度，即使它只含有一个字符。决不会有两个独立的不同高度的盒子并排排列。

块级元素可以包含内联元素和其它的块级元素，但是，内联元素仅仅只能包含其它的内联元素。像这样将一个块级元素放置在内联元素之中是不合法的：

 


<span><div>some content...</div></span>


Css特性中有一个称为display的属性，它允许你将一个块级元素改变成内联元素，反之亦然，这非常有用。但要注意的是，段落变成内联将使得它的行为类似span标签，这样在段落里放置span标签将变得不合法。在现代浏览器中你可以蒙混过关，但通不过验证。除了“inine”和“block”外，display还有其它几个属性，一个特别有用的是“none”，它常被用来在一个页面中暂时隐藏某个元素而在后面重新显示该元素。

这里有更多关于display的主题

块级元素总是方形的，它可以定义高度和宽度，但内联盒子会忽略这些属性。内联元素和块级元素都拥有补白和边距，但给一个内联元素应用这些属性在不同的浏览器中会得到不同的结果。在任何情况下，内联元素仅支持左右的补白和边距。

如果你仔细思考，你会看到为什么这样。如果span遵守垂直补白，那么内联元素的上边和下边将被推开，规范作出定义，这样是不可取的，这样内联元素上下的padding和margin就被忽略。正如这两个有颜色边框例子显示得一样，单词“padding”被一个有着红色边框和2em补白的span标签包裹，单词“margin”有着相似的边距和绿色的边框。你可以看到仅仅看到两侧的边距和补白，而垂直方向上的被忽略了。

 

定位元素

    定位元素非常有用也非常有意思，它不同于流。既然相对定位跟静态定位没有太多的不同，就让我们从它开始。

相对定位

当相对定位元素被认为定位时，它实际上是类似静态元素的流。如果你书写下面的代码，如果你不定位第四个段落，视觉上没有什么不同。

<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p style="position: relative;">Paragraph</p〉
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p
<p>Paragraph</p>


但是，现在情况发生了变化，因为我们能在任何方向上移动他，我们喜欢不改变其它元素的页面位置。没有位移，段落仅仅在垂直位置上堆叠，即使是相对定位。

我们试着给它的css属性left和top增加一定的像素值，然后应用到该段。


<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p style="position: relative; left: 20px; top: -20px;">Paragraph</p><p>Paragraph</p>
<p>Paragraph</p><p>Paragraph</p>
<p>Paragraph</p>



注意到left属性是正值，它使得该段原理容器的左边缘，而top是负值，它使得该段靠近父容器的上边缘。我也可很容易的定义正的bottom属性和负的right属性而产生同样的效果。但是如果同时存在top属性，它会忽略bottom属性，这容易混淆。坚持只定义left和top属性可以避免，给其一个正值或者负值是必要的。

同样要注意，元素的相对偏移会留下同样大小的“黑洞”，偏移的元素被升到一个独立的层次并跨越整个页面而不影响其它元素。

对于小的页面调整，这种移动可以有节制的使用，由于在大的相对定位元素中存在一定的bug，所以不适用于主要的布局功能。当你使用相对偏移时，你必须在几个浏览器中进行仔细的测试。

相对定位也有其它用途，我们将涉及到。

图4 除了相对定位的元素移到新的层次而偏离它正常的位置外，其它的都正常显示。

绝对定位

这种类型的定位使元素的行为方式与正常的流截然不同。更为重要的是，每一个绝对定位的元素在所有其它元素中占据唯一的层或z－index，即使是绝对定位的元素。这以为这绝对定位元素不会触及下一个元素，但很容易的覆盖其它元素或被其它元素覆盖。

默认状况下，绝对定位元素自动收缩以适合它所包含的内容的宽度和高度。如果其内部是一张图片，包绕它的绝对定位元素会和图片等高等宽。除非你详细的定义它的尺寸。

也不总是是这样，在某些时候绝对定位元素拥有充分的宽度，微软不同意该观点，所有支持css的浏览器版本从一开始就呈现收缩以适应的行为。绝对定位元素的行为是如此优越以致所有浏览器都采用这种行为，规范也不得不修改以反映这些行为。需要注意的是旧的非IE浏览器在显示绝对定位元素方面比现代浏览器宽。

需要重复的是，绝对定位元素不是不是流的一部分。绝对定位元素始终相对于父元素的水平坐标和垂直坐标定位。那个是父元素？如果绝对定位元素的直接父亲自身没有定位（即除了静态没有任何定位属性），那么它就不会将直接父亲作为参考的基点。而是继续查找找到一个定位的祖先元素并作为定位的基点。如果不存在定位的祖先元素，html将作为默认的定位父元素。一个因素被认为是所有其他因素的祖先，其介于其开始和结束标记之间。

当绝对定位元素将最近的父元素作为其参考基点，它将首先查找父元素的边界位置，然后从其两侧或多侧偏移，这取决于left、top、right、bottom的当前属性值。这些值在默认状况下为“auto”，如果他们种的一个改变一定的长度值，那么这个长度值将优先考虑并覆盖对侧默认的自动属性。

这主要出现在绝对定位的元素定义尺寸的时候。例如，给绝对定位的元素一个小于其父元素的宽度，然后设其right属性为10像素，这个属性值将起作用并从父元素的右侧向左偏移，这种偏移是内部的，偏移量是10像素。

注意如果你试着定义left和right属性，他们中的一个将被忽略，因为它自身有一个硬性宽度值。在这种情况下，left属性起作用。同样top和bottom属性发生冲突时，top属性起作用。但是，如果绝对定位元素没有定义宽度，left和right将同时起作用，实际上它控制盒子的显示宽度，top和botton属性也是一样。

不幸的是IE6不能处理最后的技巧，它是元素自动收缩以包绕内部的元素。IE7能正常的处理。如果你借助特定的基于IE6的css产生类似效果，你需要定义一侧的属性值来自由的控制绝对定位元素的尺寸。

自动定位

有一个例外的“父元素定位”的规则，那就是在水平或垂直方向上的定位可保持默认的“zuto”的属性。如果left和right属性都是“auto”，绝对定位元素将在水平位置上定位好像是一个“static”元素。如果一个静态的盒子跨越页面的宽度显示在中间，两侧拥有“auto”属性的绝对定位的盒子在页面中的原位置就是在页面中显示的位置，这并不意味这它现在在流中，它仍然处在自己独立的层中，只是它的显示位置被流控制，任何紧跟其后的流动元素将无视绝对定位元素的出现，他们有时被它覆盖。其top和bottom属性是“auto”的绝对定位盒子也是一样，只不过是在垂直位置上。

我称这种效果为“自动定位”，它实际上意味着绝对定位元素通过“auto”属性由流来控制，这是一种技巧，我将在后面的文章中谈及到。为了避免这个问题，当定为一个绝对定位元素是，至少需定义两个属性值（最好是left和top属性）。

 

改变堆叠顺序

让我们看看两个绝对定位的div，他们有着默认的z轴。

<div style="position: absolute;">AP One</div>
<div style="position: absolute; left: 20px; top: 20px;">AP Two</div>


 

 

图5 默认情况下第一个div被第二个div覆盖

 

AP two 在源文件中排在后面，因此它拥有较大的z轴属性，这种定位元素默认的z轴堆叠顺序可以通过直接改变z－index的值而改变，在所有的absolute， relative 和 fixed 元素上都一样。 

 


<div style="position: absolute; z-index: 2;">AP One</div>

<div style="position: absolute; left: 20px; top: 20px; z-index: 1;">AP Two</div>


图6 第二个div被第一个覆盖

注意，在流中即使是相对定位元素也拥有z-index属性，IE6有一个臭名昭著的bug，它错误的允许一个有着较低z-index属性的绝对定位元素叠在一个有着较高z-index属性的相对定位元素之上。因此，如果它出现了，你必须解决它，这是不能固定的。

注意，再一个精确的顺序中，你不必分配z-index属性值，只要定位的元素层级高于另一个，较高的就会覆盖较低的。一个比较使用的方法是分配属性值以10或者100（100，200，300等）跳跃的方式进行分配，这样你在后面可以在这些层级之间添加更多的定位元素而不必重新定义z轴属性。

绝对定位致链接不能点击的问题

在网页设计中，一个问题经常发生－－那就是链接经常莫名其妙的变得不可点击，但不是在IE浏览器中。这通常是透明的绝对定位元素覆盖在链接上所致。规范说明你不能点击任何元素，无论透明与否，但IE7及较低版本的浏览器允许此类的链接点击。如果IE中能点击而其它的浏览器中不能点击，需要寻找覆盖链接的绝对定位元素，并且重新排列是的覆盖现象不在发生。

相对基点，绝对子级

   相对定位元素除了能够移动外还有另外一个功能－－就是作为“绝对定位”元素定位的基点。什么意思？相对定位元素在页面中是特定的，它可以提供一个定位的基点，绝对定位元素子级参照它定义自己的位置。这就为什么称之为“相对定位”，因为这些元素设计和参与到绝对定位和流动之中。

图7表明一个可能的元素排列，绝对定位元素基于流动的相对定位父元素定位。现代css有时充分利用这种技巧，因此，你应该理智的尝试使其理想化。

注意IE6对于此方法存在一些问题，除非你借助zoom属性给相对定位的父元素定义一个layout属性。

图7 绝对定位元素将基于相对定位流动的父元素计算自己的位置

 

固定定位

许多人对静态和固定定位混淆不清，固定定位实际上是绝对定位的子集，固定定位元素总是视自己为基点，视窗不会滚动，固定定位元素也一样。这会导致固定定位元素很难处理。

首先，除非精打细算，固定定位元素很容易超出视窗之外。其它类型的元素也是一样，但是他们会出现滚动条而达到目的，在超出下端或达到窗口右边缘时至少是这样。记住，固定定位元素由视窗控制而不会滚动，没有充分的理由它应该出现滚动条，任何时候也不这样做。滚动条会滚动其它元素，但固定定位元素不会这样做。

但是，假设你限制了固定盒子的尺寸并通过定义overflow属性强制出现滚动条，固定元素就能滚动其内部的内容。

固定定位主要是取代框架和框架导致的所有问题。不幸的是IE6不支持固定定位属性，但是有一种技巧可以使IE6模拟固定定位。我不推荐此方法，因为它限制了某些类型的布局，并且很难执行。IE7能很好的支持，但IE6及较低的版本还是平常的绝对定位，这在所有的浏览器中都工作的很好。

这就是这篇文章，一定的看看下一篇“自动定位”的文章。

 

原文地址：http://www.vision.to/articles/the-difference-between-the-flow-and-positioning-for-web-pages.php

本人翻译水平有限，如有不足之处，请斧正，谢谢