CSS中各種佈局的背後(*FC)

啊咩發表於2018-12-10

CSS中各種佈局的背後,實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。

盒模型(Box Model)

imgage

上圖為W3C標準盒模型,另外還有一種IE盒模型(IE6以下),唯一的區別就是:前者width = content,後者width = content + padding + border

若要將IE盒模型轉換為標準盒模型,需要在文件頂部加上<!DOCTYPE html>宣告;很有意思的是,後來CSS3 中也增加了box-sizing屬性,box-sizing: content-box即標準盒模型,box-sizing: border-box即IE盒模型(width包含內邊距和邊框),W3C反過來又承認了微軟,也是有意思。

視覺格式化模型(Visual Formatting Model)

視覺格式化模型(visual formatting model)是用來處理文件並將它顯示在視覺媒體上的機制,根據上述的盒模型,為文件元素生成盒(Box)。通俗的說,視覺格式化模型就是文件裡的盒子佈局呈現的一種規則。

影響佈局的因素

  1. 盒的尺寸和型別
  2. 定位方案 Positioning Scheme (常規流,浮動和絕對定位)
  3. 文件樹中元素之間的關係
  4. 外部資訊(如:視口大小,圖片的固有尺寸等)

FC -- Formatting Context

FC...是誰在說髒話?! Formatting Context -- 格式化上下文,*FC就是視覺格式化模型,用來描述盒子佈局規則。

前方大波概念來襲!

塊級元素、塊級盒、塊容器盒、塊盒、匿名塊盒、行內級元素、行內級盒、原子行內級盒、原子行內盒、行盒、匿名行內盒、插入盒......要報警了!!!這些真的不是我YY出來的,W3C 裡真的有這麼多概念好嗎!!!感覺進坑了啊!!!headache...來吧,一個個捋清楚... -_-|||

  • 塊級元素(Block-level elements):當元素的 CSS 屬性 display:block / list-item / table 時,它就是是塊級元素 block-level ,視覺上呈現為塊,豎直排列。每個塊級元素生成一個主要的塊級盒 (Principal Block-level Box) 來包含其後代盒和生成的內容,同時參與定位體系 (Positioning Scheme) 。某些塊級元素還會在主要盒之外產生額外的盒: list-item 元素。這些額外的盒會相對於主要盒來擺放。

  • 塊級盒(Block-level boxes):由塊級元素生成,參與塊級格式化上下文(BFC)。描述元素跟它的父元素與兄弟元素之間的表現。

  • 塊容器盒(Block container box):只包含其它塊級盒,或生成一個行內格式化上下文(inline formatting context),只包含行內盒。有些塊級盒,比如表格,不是塊容器盒。相反,一些塊容器盒,比如非替換行內塊及非替換表格單元格,不是塊級盒。描述元素跟它的後代之間的影響。

  • 塊盒(Block boxes):同時是塊容器盒的塊級盒。

img

  • 匿名塊盒(Anonymous block boxes):沒有名字,不能被 CSS 選擇符選中。塊容器盒要麼只包含行內級盒,要麼只包含塊級盒,但通常文件會同時包含兩者,在這種情況下,將建立匿名塊盒來包含毗鄰的行內級盒。
<div>
   I am Block container box
   <p>I'm Inline-level boxes</p>
   I am Block container box
</div>
複製程式碼
  • 行內級元素(Inline-level elements):當元素的 CSS 屬性 display:inline, inline-block 或 inline-table 時,稱它為行內級元素。行內級元素生成行內級盒(inline-level boxes),參與行內格式化上下文(IFC)。
  • 行內級盒(Inline-level boxes):所有 display:inline 的非替換元素生成的盒是行內盒。
  • 原子行內級盒(atomic inline-level boxes):不參與生成行內格式化上下文的行內級盒稱為原子行內級盒(atomic inline-level boxes)。
  • 原子行內盒(atomic inline boxes):注意:起初原子行內級盒(atomic inline-level boxes)被稱為原子行內盒(atomic inline boxes)。很不幸,它們並非行內盒。規範的勘誤表修正了這個錯誤。不管怎樣,當再看到原子行內盒時可以放心的當成原子行內級盒,因為只是改了名字。原子行內盒在行內格式化上下文裡不能分成多行。
  • 行盒(Line boxes):行盒由行內格式化上下文(IFC)產生的盒,用於表示一行。在塊盒裡面,行盒從塊盒一邊排版到另一邊。 當有浮動時, 行盒從左浮動的最右邊排版到右浮動的最左邊。

img

  • 匿名行內盒(Anonymous inline boxes):匿名行內盒最常見的例子是塊盒直接包含文字。
  • 插入盒(Run-in boxes):插入盒(Run-in boxes)從 CSS 2.1 標準中移除了,因為可操作的實現定義不足。 可能 CSS3 會引入,但是這是實驗性質,不能用於生產環境。

定位方案(Positioning schemes)

- 常規流(Normal flow)

CSS2.1中,常規流包括塊級盒的塊格式化,行內盒的行內格式化,以及塊級盒和行內級盒的相對定位。

- 浮動(Floats)

在浮動模型中,盒首先根據常規流佈局,然後從常規流中脫離並儘可能地向左或向右位移。內容可以佈局在浮動周圍。

- 絕對定位(Absolute positioning)

在絕對定位模型中,盒完全從常規流中脫離(對後面的同胞元素無影響)並根據包含塊來分配位置。

BFC -- Block Formatting Context

觸發條件

  1. 根元素或其它包含它的元素
  2. 浮動 float: left/right/inherit
  3. 絕對定位元素 position: absolute/fixed
  4. 行內塊 display: inline-block
  5. 表格單元格 display: table-cell
  6. 表格標題 display: table-caption
  7. 溢位元素 overflow: hidden/scroll/auto/inherit
  8. 彈性盒子 display: flex/inline-flex

佈局規則

  1. 內部的Box會在垂直方向,一個接一個地放置。
  2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
  3. 每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。
  4. BFC的區域不會與float box重疊。
  5. BFC就是頁面上的一個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素。反之也如此。
  6. 計算BFC的高度時,浮動元素也參與計算

應用場景

  • 閉合浮動:浮動區域不疊加到BFC區域上
  • 防止與浮動元素重疊
  • 防止margin collapse
  • float 元素高度塌陷
  • ...

IFC -- Inline Formatting Contexts

觸發條件

一個塊級元素中包含內聯級別元素

佈局規則

  • 內部的盒子會在水平方向,一個接一個地放置。

  • 這些盒子垂直方向的起點從包含塊盒子的頂部開始。

  • 擺放這些盒子的時候,它們在水平方向上的 padding、border、margin 所佔用的空間都會被考慮在內。

  • 在垂直方向上,這些框可能會以不同形式來對齊(vertical-align):它們可能會使用底部或頂部對齊,也可能通過其內部的文字基線(baseline)對齊。

  • 能把在一行上的框都完全包含進去的一個矩形區域,被稱為該行的行框(line box)。行框的寬度是由包含塊(containing box)和存在的浮動來決定。

  • IFC中的 line box 一般左右邊都貼緊其包含塊,但是會因為float元素的存在發生變化。float 元素會位於IFC與與 line box 之間,使得 line box 寬度縮短。

  • IFC 中的 line box 高度由 CSS 行高計算規則來確定,同個 IFC 下的多個 line box 高度可能會不同(比如一行包含了較高的圖片,而另一行只有文字)

  • 當 inline-level boxes 的總寬度少於包含它們的 line box 時,其水平渲染規則由 text-align 屬性來確定,如果取值為 justify,那麼瀏覽器會對 inline-boxes(注意不是inline-table 和 inline-block boxes)中的文字和空格做出拉伸。

  • 當一個 inline box 超過 line box 的寬度時,它會被分割成多個boxes,這些 boxes 被分佈在多個 line box 裡。如果一個 inline box 不能被分割(比如只包含單個字元,或 word-breaking 機制被禁用,或該行內框受 white-space 屬性值為 nowrap 或 pre 的影響),那麼這個 inline box 將溢位這個 line box。

應用場景

  • 水平居中:當一個塊要在環境中水平居中時,設定其為 inline-block 則會在外層產生 IFC,通過設定父容器 text-align:center 則可以使其水平居中。

  • 垂直居中:建立一個IFC,用其中一個元素撐開父元素的高度,然後設定其 vertical-align:middle,其他行內元素則可以在此父元素下垂直居中。

FFC -- Flex Formatting Contexts

觸發條件

display 的值為 flexinline-flex 時,將生成彈性容器(Flex Containers), 一個彈性容器為其內容建立了一個新的彈性格式化上下文環境(FFC)

佈局規則

  • 設定為 flex 的容器被渲染為一個塊級元素
  • 設定為 inline-flex 的容器則渲染為一個行內元素
  • 彈性容器中的每一個子元素都是一個彈性專案。彈性專案可以是任意數量的。彈性容器外和彈性專案內的一切元素都不受影響。簡單地說,Flexbox 定義了彈性容器內彈性專案該如何佈局

GFC -- GridLayout Formatting Contexts

觸發條件

當為一個元素設定display值為grid的時候,此元素將會獲得一個獨立的渲染區域

佈局規則

通過在網格容器(grid container)上定義網格定義行(grid definition rows)和網格定義列(grid definition columns)屬性各在網格專案(grid item)上定義網格行(grid row)和網格列(grid columns)為每一個網格專案(grid item)定義位置和空間


參考:

Visual formatting model

視覺格式化模型

BFC 神奇背後的原理


已同步至個人部落格-軟硬皆施

Github 歡迎star :)

相關文章