CSS——可視化格式模型

CSS的可視化格式模型

• CSS中規定每個元素都有本身的盒子模型（至關一規定了這個元素如何顯示）；
• 而後可視化格式模型則是把這些盒子模型按照規則擺放到頁面上，也就是如何佈局；
• 換句話說，盒子模型規定了怎麼在頁面上擺放盒子，盒子的相互做用等等；
• CSS的可視化格式模型就是規定了瀏覽器在頁面中如何處理文檔樹

一、關鍵字：

• 包含塊（Containing Block）、
• 控制框（Controlling Box）、
• BFC(Block Formatting Context)、
• IFC(Inline Formatting Context)、
• 定位體系、
• 浮動等

二、CSS三種定位機制：普通流、浮動流、絕對定位

三、包含塊

• 一個元素的box的定位和尺寸，會與某一矩形框有關，這個框就稱之爲包含塊。
• 元素h會爲它的子孫元素建立包含塊，可是，並非說元素的包含塊就是它的父元素，元素的包含塊與它的祖先元素的樣式有關：

• 譬如：

  • 根元素是最頂端的元素，他沒有父節點，它的包含塊就是初始化包含塊；
  • static和relative的包含塊由他最近的塊級、單元格或者行內塊祖先元素的內容框（content）建立；
  • fixed的包含塊就是當前可視窗口；

  • absolute的包含塊由他最近的position屬性值不爲static的祖先元素建立：

    • 若是其祖先元素是行內元素，則包含塊取決於其祖先元素的direction特性；
    • 若是祖先元素不是行內元素，那麼包含塊的區域應該是祖先元素的內邊距邊界。

四、控制框(Controlling Box)

塊級元素和塊框以及行內元素和行框相關的概念。

1. 塊框

   • 塊級元素會生成一個塊框（Block Box），塊框會佔據一整行，用來包含子box和生成的內容；
   • 塊框同時也是一個塊包含框（Containing Box），裏面要麼只包含塊框，要麼只包含行內框（不能混雜）；
   • 若是塊框內部有塊級元素也有行內元素，那麼行內元素會被匿名塊框包圍
   • 匿名塊框的生成：

   <div>
               some inline text
               <p>more text</p>
           </div>

   • div生成了一個塊框，包含了另外一個塊框p以及文本內容some inline text，此時文本內容會被強制加到一個匿名的塊框裏面，被div生成的塊框包含；
   • 換句話說：若是一個塊框在其中包含另外一個塊框，那麼咱們強迫它只能包含塊框，所以其餘文本內容生成出來的都是匿名塊框（而不是匿名行內框）。

2. 行內框

   • 一個行內元素生成一個行內框；
   • 行內元素能排在一行，容許左右有其餘元素。
   • 匿名行內框的生成：

   <div>
               some  
               <em>more text</em>
               text
           </div>

   • div元素生成一個塊框，其中有幾個行內框（如em）以及文本some和text，此時會專門爲這些文本生成匿名行內框；

3. display屬性的影響

   • display的幾個屬性也能夠影響不一樣框的生成：

     • block，元素生成一個塊框；
     • inline，元素產生一個或多個的行內框；
     • inline-block，元素產生一個行內級塊框，行內塊框的內部會被當作塊框來格式化，而此元素自己會被看成行內級框來格式化（這也是爲何會產生BFC）；
     • none，不生成框，再也不格式化結構中，而另外一個visibility：hidden則會產生一個不可見的框

4. 總結：

   • 若是一個框裏，有一個塊級元素，那麼這個框裏的內容都會被看成塊框來進行格式化，由於只要出現了塊級元素，就會將裏面的內容分紅幾塊，每一塊獨佔一行（出現行內能夠用匿名塊框解決）；
   • 若是一個框裏，沒有任何塊級元素，那麼這個框裏的內容會被當成行內框來格式化，由於裏面的內容時按照順序成行的排列。

5. FC（Formatting Context）

   • FC即格式化上下文，它定義框內部的元素渲染規則，比較抽象，譬如：

     • FC就像是一個大箱子，裏面裝有不少元素；
     • 箱子能夠隔開裏面的元素和外面的元素（因此外部並不會影響FC內部的渲染）；
     • 內部的規則能夠是：如何定位、寬高計算、margin摺疊等等
   • 不一樣類型的框參與的FC類型不一樣，譬如塊級框對應BFC，行內框對應IFC
   • 注意：並非說全部的框都會產生FC，而是符合特定的條件纔會產生，只有產生了對應的FC後纔會應用對應的FC渲染規則

6. BFC渲染規則

   • 在塊格式化上下文中，每個元素左外邊與包含塊的左邊解除（對於從右到左的格式化，右外邊接觸右邊），即便存在浮動也是如此（因此浮動元素正常會直接貼近它的包含塊的左邊，與普通元素重合），除非這個元素也建立了一個新的BFC；

   • BFC特色：

     1. 內部box在垂直方向，一個接一個的放置；
     2. box的垂直方向由margin決定，屬於同一個BFC的兩個box間的margin會重疊；
     3. BFC區域不會與float box重疊（可用於排版）
     4. BFC就是頁面上的一個隔離的獨立容器，容器裏的子元素不會影響到外面的元素，反之也是如此；
     5. 計算BFC的高度時，浮動元素也參與計算（不會浮動塌陷如overflow：hidden清除浮動就是這個原理）；

   • 如何觸發BFC

     1. 根元素；
     2. float屬性不爲none；
     3. position爲absolute或fixed；
     4. display爲inline-block、flex、inline-flex、table、table-cell、table-caption
     5. overflow不爲visible
     6. display：table，自己不會產生BFC，可是他會產生匿名框（包含display：table-cell的框），而這個匿名框產生BFC。

7. IFC規則

   • 在行內格式化上下文中，框一個接一個地水平排列，起點是包含塊的頂部。水平方向上的margin，border和padding在框之間獲得保留，框在垂直方向上能夠以不一樣的方式對齊；
   • 它們的頂部或底部對齊，或根據其中文字的基線對齊

   • 行框：

     • 包含那些框的長方形區域，會造成一行，叫作行框。行框的寬度有它的包含塊和其中的浮動元素決定，高度的肯定由行高度計算規則決定；

   • 行框的規則：

     • 若是幾個行內框在水平方向上沒法放入一個行框內，它們能夠分配在兩個或多個垂直堆疊的行框中（即行內框的分割）
     • 行框在堆疊是沒有垂直方向上的分割且永遠不重疊；
     • 行框的高度老是足夠容納所包含的全部框，不過他可能高於他包含的最高的框（例如，框對齊會引發基線對齊）
     • 行框的左邊接觸到其包含塊的左邊，右邊接觸到其包含塊的右邊。

• 總結：

  1. 行內元素老是會應用IFC渲染規則；
  2. 行內元素會應用IFC規則渲染，譬如text-align能夠用來居中等；
  3. 塊框內部對於文本這類的匿名元素，會產生匿名行框包圍，而行框內部就應用IFC渲染規則
  4. 行內框內部，對於那些行內元素，同樣應用IFC渲染規則；
  5. 另外，inline-block，會在元素外層產生IFC（因此這個元素能夠經過text-align水平居中），固然，它的內部則按照BFC規則渲染