CSS魔法堂：你必定誤解過的Normal flow

時間 2019-11-10

標籤 css 必定誤解 normal flow 欄目 CSS 简体版

原文原文鏈接

前言

剛接觸CSS時常常聽到看到一個詞"文檔流"，那到底什麼是"文檔流"呢？而後會看到"絕對定位和浮動定位能脫離文檔流"，從這句能夠看到文檔流和絕對定位、浮動定位是同一個範疇的概念，再後來在W3C標準文檔找到關於Absolute positioning和Float的內容，卻怎麼也找不到Document flow(文檔流)的資料。後來終於知道是某位大神將Normal flow翻譯爲文檔流而已。。。。。。而我更偏好它的直譯"常規流"，或直接引用英文名詞就行了。css

Normal flow到底啥意思啊？

首先咱們從名稱入手，Normal flow直譯爲"常規流"，咱們能夠猜測它有如下幾個特色：html

做爲默認的定位模式;spa
其餘定位模式均以其爲基礎。翻譯

各位都知道與定位系統的CSS屬性position:static|relative|absolute|fixed和float:none|left|right，其中position的默認值是static，而float的默認值爲none。而position:static|relative均屬於Normal flow。
另外單純設置position:absolute效果與採用Normal flow是同樣的（《CSS魔法堂：Absolute Positioning就這個樣》），而浮動定位也是基於Normal flow。因此我認爲"脫離常規流"這一說法不徹底正確，甚至讓人產生誤解
對Normal flow的地位與和其他定位模式的關係有初步認知後，必須是火燒眉毛地想深刻它的特性和行爲特徵了！這就回到那個耳熟能詳的的IFC和BFC了。具體請參考CSS魔法堂：從新認識Box Model、IFC、BFC和Collapsing margins3d

IFC、BFC的靠山——Normal flow

對於IFC和BFC已經有不少資料圍繞它們來展開，並且咱們也投入不少精力去理解它倆，但每每會忽略一個前提，那就是沒有Normal flow就沒有IFC、BFC。當咱們採用絕對定位或浮動定位時，就沒有必要再討論IFC和BFC了。那麼說絕對定位和浮動定位會讓元素產生新的BFC又是怎麼說呢？
我是這樣理解的。首先絕對定位和浮動定位必須產生新的BFC，就想根元素會產生默認的BFC那樣，供採用常規流的塊級子孫盒子使用。但像Collapsing margins這種由BFC引發的行爲特徵，因爲盒子自己再也不受原來BFC的影響，天然就不會出現Collapsing margins了。
其實我有個疑問：那就是爲何一個文檔能夠有多個BFC，卻只有一個IFC呢？code

BFC下盒子定位的奧義

我想你們都試過採用這種方式實現水平居中(IE5.5下無效)orm

<style type="text/css">
  .center{
    font-size: 30px;
    line-height: 2;
    text-align: center;
    background: #06f;
    
    width: 200px;
    margin: 0 auto;
  }
</style>
<body>
  <div class="center">hello world:)</div>
</body>

參與BFC的盒子獨佔一行，我想你們應該沒有異議了，但具體是如何獨佔法呢？看等式吧!htm

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

其中margin-left/width/margin-right可爲auto，且具備如下規則：blog

若width爲auto，則其餘設置爲auto的屬性的實際值爲0，並讓width的實際值知足等式；rem
若width爲數值，而margin-left/right均爲auto，且除marin-left/right外其餘屬性值總和小於containing block的寬度，那麼margin-left == margin-right == ('border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width')/2；不然margin-left == margin-right == 0.

Normal flow的小弟——Relative positioning

咱們能夠以Normal flow或Float定位模式做爲基礎之上再疊加一個相對定位，從而實現更靈活的定位操做。
相對定位的最強武器就是top/right/bottom/left4個屬性了，好明顯它們默認值均是auto。另外所謂基於Normal flow或Float定位模式的相對定位，天然就是以Normal flow或Float定位模式下margin box的4條邊做爲參考系了。
接下來只要掌握如下規則，就能夠運用自如了：

left/right均爲auto，則實際值爲0;
left/right其中一個爲數值，則二者等式left == -right;
left/right均爲數值，則根據direction值。若direction爲ltr，則left值保留，而right = -left；若direction爲rtl，則right值保留，而left = -right。
(top/bottom規則同上)

注意：

疊加相對定位後的盒子不會影響其餘盒子的排版，只是會發生重疊的效果而已;
若相對定位後的盒子超出所屬containing block的範圍，且overflow:auto|scroll;則會致使出現滾動條的狀況，從而影響其餘盒子的排版。

<div style="width:100px; height:100px; overflow:auto; border:2px solid blue;">
<div style="width:20px; height:20px; background-color:red; position:relative; top:100px; left:100px;">A</div>
</div>