CSS定位機(jī)制普通流

2020-03-24 19:18:59

字體：大中小

供稿：網(wǎng)友

由于沒(méi)有找到自己認(rèn)為完整的關(guān)于普通流、浮動(dòng)和絕對(duì)定位的中文文章，于是鼓起勇氣決定自己來(lái)寫(xiě)篇。為此大致啃掉了CSS2.1里的 8 Box model 以及 9 Visual formatting model 。實(shí)話說(shuō)，還真是看得有點(diǎn)頭大，呵呵~文檔流，其實(shí)標(biāo)準(zhǔn)里根本就沒(méi)有這個(gè)詞。如果把文檔流直譯為英文就是 document flow ，但標(biāo)準(zhǔn)里只有另一個(gè)詞，叫做普通流( normal flow )，或者稱為常規(guī)流。但似乎大家更習(xí)慣文檔流的稱呼，因?yàn)楹芏嘀形姆g的書(shū)就是這么來(lái)的。比如《CSS Mastery》，英文原書(shū)中至始至終都只有普通流 normal flow 這一詞，從來(lái)沒(méi)出現(xiàn)過(guò)文檔流 document flow 。但是中文譯本“普通流”和“文檔流”卻是交替出現(xiàn)的。什么是普通流？簡(jiǎn)單說(shuō)就是元素按照其在 HTML 中的位置順序決定排布的過(guò)程。并且這種過(guò)程遵循標(biāo)準(zhǔn)的描述。為了從不同角度說(shuō)明，我采集了一些可能冗長(zhǎng)、具體或者晦澀的其他人給出的定義：將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。
Jennifer.Kyrnin@About.com: 普通流是元素在多數(shù)情況下呈現(xiàn)在 web 頁(yè)面上的方式。所有 HTML 都在塊框( block boxes，塊級(jí)元素 )或者行內(nèi)框( inline boxes，行內(nèi)元素 )中。
Rainbo Design: 當(dāng)瀏覽器開(kāi)始渲染 HTML 文檔，它從窗口的頂端開(kāi)始，經(jīng)過(guò)整個(gè)文檔內(nèi)容的過(guò)程中，分配元素需要的空間。除非文檔的尺寸被 CSS 特別的限定，否則瀏覽器垂直擴(kuò)展文檔來(lái)容納全部的內(nèi)容。每個(gè)新的塊級(jí)元素渲染為新行。行內(nèi)元素則按照順序被水平渲染直到當(dāng)前行遇到了邊界，然后換到下一行垂直渲染。這個(gè)過(guò)程被成為普通文檔流。
可見(jiàn)，把流( flow )理解為流程，完全說(shuō)的通。普通流即是通常情況下的元素排布和定位流程。但其實(shí)在CSS2.1RC里，普通流的本質(zhì)是三種定位機(jī)制( 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.這個(gè)過(guò)程包括了塊格式化( block formatting )，行內(nèi)格式化(inline formatting )，相對(duì)定位( relative positioning )，以及 run-in boxes 的定位。似乎和上面那些迥然不同，但是把這些分解開(kāi)來(lái)，仍然是一致的。另外，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(格式化上下文) ，類(lèi)型可以是 block ，或者是 inline ，但不能同時(shí)屬于這兩者。并且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內(nèi)框) 則在 inline formatting context(行內(nèi)格式化上下文) 里格式化。我們知道，任何被渲染的元素都屬于一個(gè) box ，并且不是 block ，就是 inline 。即使是未被任何元素包裹的文本，根據(jù)不同的情況，也會(huì)屬于匿名的 block boxes 或者 inline boxes。所以上面的描述，即是把所有的元素劃分到對(duì)應(yīng)的 formatting context 里。組合上面的定義，并且姑且先把 formatting context 看做是一種范圍限定，那么具體講，普通流就是這樣的過(guò)程：1.在對(duì)應(yīng)的 block formatting context 中，塊級(jí)元素按照其在HTML中的順序，在其容器框里從左上角開(kāi)始，從上到下垂直地依次分配空間、堆砌( stack )，并獨(dú)占一行，邊界緊貼父容器。兩相鄰元素間的距離由 margin 屬性決定，在同一個(gè) block formatting context 中的垂直邊界將被重疊( collapse )。并且，除非創(chuàng)建一個(gè)新的 block formatting context ，否則塊級(jí)元素的寬度不受浮動(dòng)元素的影響(這就是浮動(dòng)元素能蓋在塊級(jí)元素上面的原因)。2.在對(duì)應(yīng)的 inline formatting context 中，行內(nèi)元素從容器的頂端開(kāi)始，一個(gè)接一個(gè)地水平排布。水平填充、邊框和邊距對(duì)行內(nèi)元素有效。但垂直的填充、邊框和空白邊不影響其高度。一個(gè)水平行中的所有 inline box 組成了名為 line box 的矩形區(qū)域。 line box 的高度始終容下所有的 inline box ，并只與行高有關(guān)。 line box 的寬度受到父容器和浮動(dòng)元素存在的影響(這就是文本環(huán)繞浮動(dòng)元素)。如果 line box 的寬度小于容器， line box 的水平排布就取決于 text-align 。如果 line box 的寬度大于容器，則截?cái)?line box 并換行在新的 line box 中重新排布元素(截?cái)嗵幉粦?yīng)用 padding 和 margin 值)。如果 line box 無(wú)法截?cái)啵鐔卧~過(guò)長(zhǎng)或者指定不換行，則會(huì)溢出容器。3.對(duì)這些 block box 和 inline box 進(jìn)行相對(duì)定位，即相對(duì)于已排布的位置進(jìn)行偏移。元素在其中保留原來(lái)所占用的空間。說(shuō)了一堆東西，其實(shí)就只是在說(shuō)如何排布元素而已。那些都非常容易理解，除了一個(gè)概念—— formatting context 。什么是 formatting context ？ context 總是解釋為上下文環(huán)境，那么格式化上下文就應(yīng)該是指格式化時(shí)的前后關(guān)系。然而對(duì)此，標(biāo)準(zhǔn)里沒(méi)有更多的定義和解釋。雖然 mozilla developer center 上沒(méi)有關(guān)于 inline formatting context 的資料，但是卻有關(guān)于 block formatting context 的描述：一個(gè) block formatting context 是web頁(yè)面可視化CSS渲染的一個(gè)部分，是一塊 block boxes 排布以及 float 元素相互作用的區(qū)域。
用自己的話簡(jiǎn)言之，那是一個(gè)作用范圍?？梢园阉斫獬墒且粋€(gè)獨(dú)立的容器，并且這個(gè)容器的里box的布局，與這個(gè)容器外的毫不相干。下面的這些情況，都會(huì)創(chuàng)建一個(gè)新的 block formatting context：根元素
浮動(dòng)或絕對(duì)定位的元素
display 值為 inline-blocks ， table-cell 或 table-caption
overflow 值為非 visible
雖然標(biāo)準(zhǔn)里沒(méi)有提到根元素會(huì)創(chuàng)建新的 block formatting context ，但是mozilla提到了，并且這也解釋了初始的一個(gè)上下文環(huán)境的建立。這里有個(gè)建立( establishes )的概念，這個(gè)概念和建立容器塊( containing block )的概念類(lèi)似。比如，A是B父元素，當(dāng)B被渲染時(shí)其位置和大小會(huì)參照一個(gè)容器塊，這個(gè)容器塊是由其父元素A建立的。是的，有點(diǎn)簡(jiǎn)單問(wèn)題復(fù)雜化。雖然實(shí)質(zhì)上父元素就是子元素的容器，但是過(guò)程中間卻有個(gè)建立( establishes )的概念。并且這個(gè)創(chuàng)建的概念被應(yīng)用于其他作用范圍，包括 block formatting context 。想想我們平常在做的事情。當(dāng)一個(gè)父元素因?yàn)樽釉馗?dòng)而導(dǎo)致高度為0的時(shí)候，也許我們會(huì)習(xí)慣的加上這樣的規(guī)則：overflow:hidden;zoom:1; 。overflow:hidden 不正是創(chuàng)建了一個(gè)新的 block formatting context 嗎？那么 zoom:1 是怎么回事？這不得不提到 IE 私有的 hasLayout ，一個(gè)和 block formatting context 行為相仿的IE特產(chǎn)。對(duì)于 hasLayout ，本文不做討論?？梢蚤喿x那篇有名的 On having layout ，中文版由 old9 翻譯過(guò)，但是鏈接似乎暫時(shí)掛掉了，所以可以看看藍(lán)色理想上轉(zhuǎn)載的版本。這就是為什么浮動(dòng)元素總是容納浮動(dòng)元素的原因——浮動(dòng)元素創(chuàng)建了新的 block formatting context，其內(nèi)部的布局不在和外部有關(guān)。比如內(nèi)部的浮動(dòng)清除不會(huì)再影響到外部，并且內(nèi)部的浮動(dòng)對(duì)于外部而言也是不可見(jiàn)的。這也是為什么《精通CSS》會(huì)說(shuō) “應(yīng)用值為 hidden 或 auto 的 overflow 屬性會(huì)自動(dòng)地清理任何浮動(dòng)元素” 的原因。同時(shí)，這也是為什么有的時(shí)候必須用清除浮動(dòng)而不是設(shè)置overflow來(lái)使父容器容納浮動(dòng)元素，因?yàn)?“設(shè)置框的overflow屬性會(huì)影響它的表現(xiàn)”。
舉個(gè)實(shí)際當(dāng)中的常見(jiàn)例子，比如垂直邊距疊加問(wèn)題：代碼: html
head /head
body
div id="A"
div id="B"
我有10px m-t
/div
/div
/body
/html 如果在現(xiàn)代的瀏覽器里運(yùn)行，那么 B 的10px上邊距將會(huì)和父元素 A 的20px上邊距重疊起來(lái)，從而看起來(lái)就好像 B 沒(méi)有上邊距一樣。就像前面說(shuō)的那樣，同一個(gè) block formatting context 中的垂直邊界將被重疊。那么不同 block formatting context 呢？這種情況，如果不想加邊框( border:1px solid transparent; )解決的話，那么就需要 A 建立一個(gè)新的 block formatting context 將 B 包裹起來(lái)，那么 A 的上邊距和 B 的上邊距就毫不相干了。可以用浮動(dòng)，也可以加 overflow ，這要看具體情況。代碼: html
head /head
body
div id="A"
div id="B"
我有10px m-t
/div
/div
/body
/html 再一個(gè)例子，回頭看下上面過(guò)程里這樣的一句：除非創(chuàng)建一個(gè)新的 block formatting context ，否則塊級(jí)元素的布局不受浮動(dòng)元素的影響。這是造成元素重疊的原因。比如下面的代碼：代碼: html
head /head
body
div id="A"
div id="B"
浮動(dòng)元素m_10_10_0_0
/div
div id="C"
普通流塊
/div
/div
/body
/html 普通流塊 C 在容器 A 里排布的時(shí)候，并不受浮動(dòng)元素的影響，甚至當(dāng)浮動(dòng)元素 B 不存在。但是如果 C 創(chuàng)建了新的 block formatting context ，那么，普通流塊c就會(huì)像 line box 一樣受到浮動(dòng)元素存在的影響而縮小。代碼: html
head /head
body
div id="A"
div id="B"
浮動(dòng)元素m_10_10_0_0
/div
div id="C"
普通流塊
/div
/div
/body
/html 關(guān)于浮動(dòng)和 block formatting context ，brunildo.org 上有一份不錯(cuò)的參考。說(shuō)了這么多了，其實(shí)概念仍然可以很簡(jiǎn)單。普通流僅僅只是一種定位的機(jī)制。而flow本身在標(biāo)準(zhǔn)里也可以作為一個(gè)動(dòng)詞，就如同按順序一個(gè)個(gè)的拿出HTML元素然后放到頁(yè)面上一般。只是要注意一下 formatting context 的概念，特別是 block formatting context ，因?yàn)槠溆绊懜?包括邊距重疊、浮動(dòng)清除、元素重疊等)。寫(xiě)到這里也就差不多了，由于水平所限，如文中有不當(dāng)之處，請(qǐng)指點(diǎn)下，非常感謝。謝謝閱讀
html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：10條影響CSS渲染速度的寫(xiě)法與建議

下一篇：檢測(cè)瀏覽器對(duì)HTML5和CSS3支持度的方法