CSS-格式化上下文(Formatting Context)

來源:互聯網
上載者:User

標籤:dde   規則   form   bfc   如何   isp   layout   text   overflow   

Formatting Context:指頁面中的一個渲染地區,並且擁有一套渲染規則,他決定了其子項目如何定位,以及與其他元素的相互關係和作用。

BFC

BFC:塊級格式化上下文,它是指一個獨立的塊級渲染地區,只有Block-level BOX參與,該地區擁有一套渲染規則來約束塊級盒子的布局,且與地區外部無關。
BFC的產生:
浮動,絕對位置元素,和display屬性為inline-boxs、table-cells、table-captions的不是塊盒的塊容器(除非這個值已經被傳播到視口),以及當overflow不為visible的塊盒才會為它的內容建立新的BFC。

  1. float的值不為none
  2. position的值為absolute或fixed(div本身形成BFC,但整個塊脫離文檔流,並且無法被父元素擷取高度)
  3. display的值為table-cell、table-caption、inline-block、flex 或 inline-flex
  4. overflow的值不為visibility

BFC的特性:

  1. 在BFC中,盒子都是從它的包含塊的頂部一個一個的垂直放置的。兩個相鄰盒子的垂直間距決定於margin屬性。在BFC中,兩個相鄰塊級盒子之間垂直方向上的外邊距是會塌陷的。
  2. 在BFC中,每個盒子的左外邊界挨著包含塊的左邊界(對於從右至左的格式化,則為右邊界互相挨著)。即使是存在浮動元素也是如此(即使一個盒子的行盒是因為浮動而收縮了的),除非這個盒子建立了一個新的BFC(在某些情況下這個盒子自身會因為浮動而變窄)。

舉例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <p>html根節點預設是一個BFC,&lt;div style="overflow: hidden;"&gt;&lt;/div&gt;產生多個新的BFC</p>    <hr>    <p>div1先產生新的BFC,然後div2在根節點的BFC中排列</p>    <div style="overflow: hidden;">        <div style="float: left; width: 100px; height: 100px; background: lightgreen;">div1</div>        <div style="width: 200px; height: 200px; background: pink;">div2</div>    </div>    <hr>    <p>div2先在根節點的BFC中排列,然後div1產生新的BFC</p>    <div style="overflow: hidden;">        <div style="width: 200px; height: 200px; background: pink;">div2</div>        <div style="float: left; width: 100px; height: 100px; background: lightgreen;">div1</div>    </div>    <hr>    <p>div1先產生新的BFC,然後div2產生新的BFC</p>    <div style="overflow: hidden;"></div>        <div style="float: left; width: 100px; height: 100px; background: lightgreen;">div1</div>        <div style="overflow: hidden; width: 200px; height: 200px; background: pink;">div2</div>    </div>    <hr>    <p>不觸發BFC,margin重疊</p>    <div style="overflow: hidden;"></div>        <div style="margin: 20px; width: 100px; height: 100px; background: lightgreen;">div1</div>        <div style="margin: 20px; width: 100px; height: 100px; background: pink;">div2</div>    </div>    <hr>    <p>觸發BFC,margin不重疊</p>    <div style="overflow: hidden;"></div>        <div style="margin: 20px; width: 100px; height: 100px; background: lightgreen;">div1</div>        <div style="overflow: hidden;">            <div style="margin: 20px; width: 100px; height: 100px; background: pink;">div2</div>        </div>    </div>    <hr>    </body></html> 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><!-- body預設是static(沒有建立BFC)    此時body包裹住content    因為content有margin-top: 200px    所以雖然body的offsetTop為0但實際距離頂部是200 --><body>    <!-- nav:fixed(建立BFC) -->    <div style="position: fixed;top: 0;left: 0; width:100%; height:50px; background: rgba(0,0,0,0.5);">nav</div>    <div style="width: 100%;height: 500px; margin-top: 200px;">content</div></body></html>
IFC

IFC:行內格式化上下文。

  1. 在IFC中,盒子依次水平排列,從它的包含塊的最頂端開始。水平方向的margins、borders和paddin體現在這些盒子之間。這些盒子可以在垂直方向可以以不同的方式對齊:底部對齊、頂部對齊或者以內部文字的基準對齊。包含這些盒子的一行矩形地區成為行框。
  2. 行框的寬度由包含塊和(這行)是否存在float而決定。行框的高度由行高的計算規則決定。
  3. 行框的高度永遠容得下這一行所有包含的盒子。但是,行框甚至可能比包含的最高的盒子要高(例如,盒子對齊了導致基準排列)(譯者註:不是很懂,原文boxes are aligned so that baselines line up)。當盒子B的高度小於包含其的行框的時候,行框內的B的垂直對齊由“vertical-align”屬性決定。當一個行框不能裝下多個行內框時,它們被打斷成二個或多個垂直堆疊的行框。所以,一個段落是讀個行框的垂直堆疊。行框在垂直方向沒有分隔的堆疊(除了指定的其它地方)並且它們從不重疊。
  4. 通常,行框的左邊緣緊貼這它的包含塊的左邊緣,右邊緣緊貼這包含塊的右邊緣。然而,浮動盒子可能出現在包含塊的邊緣和這個行框的邊緣之間。因此,即使說通常情況下同一個包含框內的行框們有一樣的寬度,但因為有float元素的存在它們也可能有不同的寬度。同一IFC中的行框通常有不同的高度(例如有一行可能有一個高的圖片然而其他行僅有文字)。
  5. 當所有內聯盒子的寬度總和超過了包含它們的行框的寬度,它們的水平排布由“text-align”屬性決定個。如果該屬性值為“justify”,使用者代理程式則會展開內聯框中的空格和單詞(出去inline-table喝inline-block的盒子)。
  6. 當一個行內框超出了行框的寬度,它會被分割成多個盒子,這些盒子分布在多個行框中。如果這個行內框不能被分割(例如,這個行內框包含一個單字元或者有特定的語言分割規則不允許在行內框中出現分割,再或者說這個行內框被值是nowrap或pre的white-space所影響),因此這個行內框會移除行框。
  7. 當一個行內框被分割,margins、borders和paddings並不會在分割處體現出來。
  8. 行內框可能會在同一行行框內被分割成多個因為雙向文本處理。

注意:

  • inline,inline-block沒有width屬性。寬度由包裹的block決定,換行由word-wrap屬性決定
GFC

GFC(GridLayout Formatting Contexts):網格布局格式化上下文

FFC

FFC(Flex Formatting Contexts):調整格式化上下文

inline-block和float

共性:

  1. inline-block: 是把一個元素的display設定為塊狀內嵌元素,意思就是說,讓一個元素的容器inline展示,並且裡面的內容block展示;inline屬性使元素內聯展示,內嵌元素設定寬度無效,相鄰的inline元素會在一行顯示不換行,直到本行排滿為止。block的元素始終會獨佔一行,呈塊狀顯示,可設定寬高。所以inline-block的元素就是寬高可設定,相鄰的元素會在一行顯示,直到本行排滿,也就是讓元素的容器屬性為block,內容為inline。
  2. float: 設定元素的浮動為左或者右浮動,當設定元素浮動時,相鄰元素會根據自身大小,排滿一行,如果父容器寬度不夠則會換行。當我們設定了元素的浮動時,這個元素就脫離了文檔流,相鄰元素會呈環繞裝排列。
    兩者共同點是都可以實現元素在一行顯示,並且可以自由設定元素大小。

區別:

  1. inline-block: 水平排列一行,即使元素高度不一,也會以高度最大的元素高度為行高,即使高度小的元素周圍留空,也不回有第二行元素上浮補位。可以設定預設的垂直對齊基準。
  2. float: 讓元素脫離當前文檔流,呈環繞裝排列,如遇上行有空白,而當前元素大小可以擠進去,這個元素會在上行補位排列。預設是頂部對齊。

使用情境:

  1. inline-block: 當我們要設定某些元素在一行顯示,並且排列方向一致的情況下,我們儘可能去用inline-block。因為inline-block的元素仍然在當前文檔流裡面,這樣就減少了程式對DOM的更改操作,因為DOM的每一次更改,瀏覽器會重繪DOM樹。理論上會增加效能消耗。這樣也不用像flaot那樣麻煩,需要清除flaot.
  2. float: 即使inline-block為布局首選,但是也有inline-block所不能涉及的一些業務需求,比如:有兩個元素,我們需要一個向左,一個向右排列,這時候我們就只能用float來實現,對於新手來說,會糾結float不好調,比較麻煩,想到達到預期效果,需要多次調整,有時候我們給元素設定了浮動,元素顯示的順序卻變了,一時搞不清楚就改變HTML中元素的前後順序等等。因為瀏覽器的解析順序是逐行解析,當設定兩個元素的右浮動時,順序在前面的元素會先被解析,他是右浮動,那麼在前邊的元素就先往右浮動佔位置,後邊的元素依次被解析到以後,才往右排列,這樣我們看到的順序就是反的,當弄明白原因之後,調試就方便多了。

CSS-格式化上下文(Formatting Context)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.