前端佈局原理涉及到的相關概念總結

總體結構說明：

• CSS basic box model（標準盒模型）
• Visual formatting model （視覺格式化模型）
• Viewport
• containing block （包含塊）

• Normal flow

  • Block formatting contexts（塊格式化上下文）
  • Inline formatting contexts（內聯格式化上下文）

---

標準盒模型

上面這張圖你們應該都很熟悉，咱們知道在瀏覽器佈局文檔時，頁面每個元素會被當作一個個矩形的盒子對待，咱們編寫的css，決定這些盒子的大小、位置、以及各類屬性（背景、顏色、等等等），這些盒子的特色以下：

1）擁有四個邊界，分別是：content edge 、padding edge、border edge、margin edge
2）對應的，每個盒子，劃分4個區域：

• content box： 容納子孫元素,對應上圖中中心藍色部分；
• padding box： 隔離自身與子孫，對應上圖中的綠色部分；
• border box： 自身輪廓
• margin box： 隔離自身與相鄰元素

這裏說明一點：對於平常佈局中使用的width屬性來講，默認狀況下width值設置的是content box 的寬度（可是早期ie版本的瀏覽器width值設定的是border box的寬度），這種計算方式對咱們的佈局元素來講會有一些不方便（若是涉及border、padding），因此這裏提一個經常使用的屬性：box-sizing，屬性值與區域劃分對應，分別爲：content-box 、padding-box、border-box、margin-box。通常開發中最經常使用的選項爲border-box，這裏很少作說明。

視覺格式化模型

定義：

The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. This model is a basic concept of CSS

因此，視覺格式化模型是什麼？
是一個算法、一系列規則
那這個算法用來幹嗎？
是用來描述用戶代理（瀏覽器）如何爲視覺媒體（屏幕）處理文檔樹。
而肯定文檔在屏幕上的顯示，具體又涉及：
控制元素盒子的生成、定位體系、正常流、浮動、絕對定位、層級顯示、文檔方向等等，因此本文後面介紹的一些概念，都屬於視覺格式化模型中的一部分。

下面簡要說明一部份內容

在視覺格式化模型中，文檔中的每個元素會對應生成0個、1個、或多個聽從css 盒模型的盒子，每個盒子佈局由下列因素決定：

• 盒的尺寸和類型
• 定位體系 Positioning Scheme （常規流，浮動和絕對定位）
• 文檔樹中元素之間的關係
• 外部信息（如：視口大小，圖片的固有尺寸等）

通俗來講，咱們文檔中的每個元素，都被按照一個個盒子來對待，一個元素可能對應一個盒子，也可能對應多個盒子（例如列表項元素），這些盒子的特色符合css盒模型的定義，也就是說這些盒子都會有對應的內容區域、內邊距區域、邊框區域等等，這些盒子最終在屏幕上的顯示，則取決於盒子各項 默認 或咱們設定的屬性值，像display、position、width、height等等。

盒子的生成：
從文檔元素生成盒子，盒子區分不一樣的類型，對應不一樣的計算規則，取決於css display 屬性。元素類型區分：

• 塊級元素
• 行內元素
• 行內塊級元素

盒子的定位：
生成盒子以後，css引擎須要定位每個盒子完成佈局，定位區分：

• 普通流：當css position 屬性被設定爲static或relative，而且 css float 值爲none 盒子屬於普通流定位，一個接着一個進行垂直or水平佈局；
• 浮動：css float 屬性值不爲none，而且position 值爲 static 或 relative ，盒子屬性浮動定位。
• 絕對定位：若是元素的 position 爲 absolute 或 fixed，該元素爲絕對定位。絕對定位的元素相對於其包含塊進行定位。

Viewport：

對於視口，這裏給出w3c的定義：

User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may change the document's layout when the viewport is resized

我的理解：瀏覽器提供咱們查閱文檔的地方：即window窗口，即手機屏幕區域

containing block （包含塊）

在CSS 2.1中，許多盒子的位置和大小是針對稱爲包含塊的矩形框的邊緣計算的。通常而言，生成的框充當後代框的包含塊,一個盒子爲它的後代「創建」包含塊,每一個盒子相對於其包含的塊被賦予一個位置，但它不受該包含塊的限制, 它可能溢出。

不一樣定位元素的包含塊：

1：若是 position 屬性是 static 或 relative 的話：包含塊就是由它的最近的祖先塊元素的內容區（content box）的邊緣組成的。
2：若是 position 屬性是 absolute 的話：包含塊就是由它的最近的 非static定位 的祖先元素的padding box的邊緣組成的。若是不存在知足條件的祖先元素，就爲 ICB （初始包含塊）
3：若是 position 屬性是fixed 的話：這裏須要區分當前的媒體類型，通常咱們平常的使用情景就是在連續媒體下，包含塊爲 viewport
4：若是 position 屬性是 absolute 或 fixed，包含塊也多是由知足如下條件的最近父級元素的padding box的邊緣組成的：

• transform or perspective 屬性值不爲 none
• will-change 屬性值爲 transform 或 perspective
• filter 屬性值不爲none 或者 will-change 屬性值爲 filter (only works on Firefox).

另：ICB（initial containing block）：
文檔根元素所在包含塊稱爲初始包含塊；
初始包含塊的的尺寸和位置，對於不一樣的媒體類型也是有不一樣的狀況，但咱們也只考慮連續媒體的狀況：
尺寸：viewport的尺寸；
位置：首屏左上角

Normal flow：

即普通流：
正常流中的框屬於格式化上下文，能夠是塊或內聯，但不能同時使用。 塊級框參與塊格式上下文。 內聯級別框參與內聯格式化上下文。

Block formatting contexts

定義

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements.

塊格式化上下文是一個css的渲染區域，它是佈局過程當中生成塊級盒子的區域，也是浮動元素與其餘元素的交互限定區域。

建立BFC的方式：

• 根元素或包含根元素的元素；
• 浮動元素（元素的 float 不是 none）；
• 絕對定位元素（元素的 position 爲 absolute 或 fixed）；
• 行內塊元素（元素的 display 爲 inline-block）；
• overflow不爲visible的塊元素
• ….（這裏mdn文檔說明很全面，這裏不所有列出）

BFC特性說明：

1. BFC內部的元素按常規流的規則佈局
2. 一個BFC對應一個獨立、封閉的渲染區域，子元素的CSS樣式不會影響BFC元素外部，也就數說 ，BFC元素會隔離自身與父元素。
   注：這裏咱們常見的例子就是對於外邊距合併中：子元素的外邊距溢出到父元素外邊這種狀況，咱們爲父元素設置 overflow:auto,能夠解決這個問題，其背後的原理就是讓父元素建立了一個BFC，這樣父元素內部的css樣式，就不會影響到外部。固然在BFC內部，兄弟元素之間的外邊距，該合併仍是會合並。
3. 在計算BFC元素高度時，浮動的子元素，參與BFC父元素的高度計算
   注：這裏能夠爲父元素添加屬性讓其建立BFC，能夠用來解決的就是由於浮動而形成的高度塌陷問題。
4. 浮動盒區域不疊加到BFC上；
   注：這裏對於浮動元素後的塊級元素，佈局時會當浮動元素’不存在’來處理，這時候可能會發生塊級元素被float元素遮蓋的現象，這時候讓被遮蓋的元素建立BFC，能夠避免被覆蓋的狀況出現。

Inline formatting contexts

特性：

• IFC內部的元素，按從左到右、從上到下的順序排布（與文檔方向有關）
• IFC內部的每一個元素，均可以經過設置vertical-align屬性，來調整在垂直方向上的對齊
• 包含這些內部元素的矩形區域，造成的每一行，被稱爲line box

另，除了BFC，IFC還有FFC（flex）、GFC（grid）等，這裏再也不詳細說明。