|
原創(chuàng)。原文：http://www.swordair.com/blog/2010/08/415，轉載請保留。
由于沒有找到自己認為完整的關于普通流、浮動和絕對定位的中文文章，于是鼓起勇氣決定自己來寫篇。為此大致啃掉了CSS2.1里的 8 Box model 以及 9 Visual formatting model 。實話說，還真是看得有點頭大，呵呵~
文檔流，其實標準里根本就沒有這個詞。如果把文檔流直譯為英文就是 document flow ，但標準里只有另一個詞，叫做普通流( normal flow )，或者稱為常規(guī)流。但似乎大家更習慣文檔流的稱呼，因為很多中文翻譯的書就是這么來的。比如《CSS Mastery》，英文原書中至始至終都只有普通流 normal flow 這一詞，從來沒出現(xiàn)過文檔流 document flow 。但是中文譯本“普通流”和“文檔流”卻是交替出現(xiàn)的。
什么是普通流？簡單說就是元素按照其在 HTML 中的位置順序決定排布的過程。并且這種過程遵循標準的描述。
為了從不同角度說明，我采集了一些可能冗長、具體或者晦澀的其他人給出的定義：
- 將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。
- Jennifer.Kyrnin@About.com: 普通流是元素在多數(shù)情況下呈現(xiàn)在 web 頁面上的方式。所有 HTML 都在塊框( block boxes，塊級元素 )或者行內框( inline boxes，行內元素 )中。
- Rainbo Design: 當瀏覽器開始渲染 HTML 文檔，它從窗口的頂端開始，經(jīng)過整個文檔內容的過程中，分配元素需要的空間。除非文檔的尺寸被 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 。即使是未被任何元素包裹的文本，根據(jù)不同的情況，也會屬于匿名的 block boxes 或者 inline boxes。所以上面的描述，即是把所有的元素劃分到對應的 formatting context 里。
出處：藍色理想
責任編輯：bluehearts
上一頁 下一頁 CSS定位機制之一:普通流 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 CSS定位機制之一:普通流 [1]
第 2 頁 
