CSS定位机制之一:平凡流

原创。原文：http://www.swordair.com/blog/2010/08/415，转载请保存。

因为没有找到本身以为完备的关于平凡流、浮动和绝对定位的中文文章，于是兴起勇气抉择本身来写篇。为此大抵啃掉了CSS2.1里的 8 Box model 以及 9 Visual formatting model 。真话说，还真是看得有颔首大，呵呵~

文档流，着实尺度里基础就没有这个词。假如把文档流直译为英文就是 document flow ，但尺度里只有另一个词，叫做平凡流( normal flow )，可能称为通例流。但好像各人更风俗文档流的称号，由于许多中文翻译的书就是这么来的。好比《CSS Mastery》，英文原书中至始至终都只有平凡流 normal flow 这一词，从来没呈现过文档流 document flow 。可是中文译本“平凡流”和“文档流”却是瓜代呈现的。

什么是平凡流？简朴说就是元素凭证其在 HTML 中的位置次序抉择排布的进程。而且这种进程遵循尺度的描写。

为了从差异角度声名，我收罗了一些也许冗长、详细可能艰涩的其他人给出的界说：

• 将窗体自上而下分成一行行，并在每行中按从左至右的次序排放元素，即为文档流。
• Jennifer.Kyrnin@About.com: 平凡流是元素在大都环境下出此刻 web 页面上的方法。全部 HTML 都在块框( block boxes，块级元素 )可能行内框( inline boxes，行内元素 )中。
• Rainbo Design: 当赏识器开始渲染 HTML 文档，它从窗口的顶端开始，颠末整个文档内容的进程中，分派元素必要的空间。除非文档的尺寸被 CSS 出格的限制，不然赏识器垂直扩展文档来容纳所有的内容。每个新的块级元素渲染为新行。行内元素则凭证次序被程度渲染直到当前行碰着了界线，然后换到下一行垂直渲染。这个进程被成为平凡文档流。

可见，把流( flow )领略为流程，完全说的通。平凡流等于凡是环境下的元素排布和定位流程。

但着实在CSS2.1RC里，平凡流的本质是三种定位机制( Positioning schemes )之一，被界说为：

引用:

Normal flow. In CSS 2.1, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of run-in boxes.

这个进程包罗了块名目化( block formatting )，行内名目化(inline formatting )，相对定位( relative positioning )，以及 run-in boxes 的定位。好像和上面那些迥然差异，可是把这些解析开来，如故是同等的。

其它，9.4 Normal flow下尚有一段：

引用:

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block boxes participate in a block formatting context. Inline boxes participate in an inline formatting context.

这是段描写，不是界说。在平凡流中的 Box(框) 属于一种 formatting context(名目化上下文) ，范例可所以 block ，可能是 inline ，但不能同时属于这两者。而且， Block boxes(块框) 在 block formatting context(块名目化上下文) 里名目化， Inline boxes(块内框) 则在 inline formatting context(行内名目化上下文) 里名目化。

我们知道，任何被渲染的元素都属于一个 box ，而且不是 block ，就是 inline 。纵然是未被任何元素包裹的文本，按照差异的环境，也会属于匿名的 block boxes 可能 inline boxes。以是上面的描写，等于把全部的元素分别到对应的 formatting context 里。

出色内容，请点击下一页！

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!