普通流 CSS定位機制

網頁製作Webjx文章簡介：由於沒有找到自己認為完整的關於普通流、浮動和絕對位置的中文文章，於是鼓起勇氣決定自己來寫篇。為此大致啃掉了CSS2.1裡的 8 Box model 以及 9 Visual formatting model 。實話說，還真是看得有點頭大，呵呵~ 文檔流，其實標準雷根本就沒有這個詞。如果把文檔流直譯

　　由於沒有找到自己認為完整的關於普通流、浮動和絕對位置的中文文章，於是鼓起勇氣決定自己來寫篇。為此大致啃掉了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 裡。

　　組合上面的定義，並且姑且先把 formatting context 看做是一種範圍限定，那麼具體講，普通流就是這樣的過程：

　　1.在對應的 block formatting context 中，區塊層級元素按照其在HTML中的順序，在其容器框裡從左上方開始，從上到下垂直地依次分配空間、堆砌( stack )，並獨佔一行，邊界緊貼父容器。兩相鄰元素間的距離由 margin 屬性決定，在同一個 block formatting context 中的垂直邊界將被重疊( collapse )。並且，除非建立一個新的 block formatting context ，否則區塊層級元素的寬度不受浮動元素的影響(這就是浮動元素能蓋在區塊層級元素上面的原因)。

　　2.在對應的 inline formatting context 中，行內元素從容器的頂端開始，一個接一個地水平排布。水平填充、邊框和邊距對行內元素有效。但垂直的填充、邊框和空白邊不影響其高度。一個水平行中的所有 inline box 組成了名為 line box 的矩形地區。 line box 的高度始終容下所有的 inline box ，並只與行高有關。 line box 的寬度受到父容器和浮動元素存在的影響(這就是文本環繞浮動元素)。如果 line box 的寬度小於容器， line box 的水平排布就取決於 text-align 。如果 line box 的寬度大於容器，則截斷 line box 並換行在新的 line box 中重新排布元素(截斷處不應用 padding 和 margin 值)。如果 line box 無法截斷，如單詞過長或者指定不換行，則會溢出容器。

[1] [2] [3]  下一頁