CSS的可視化花樣模子

• CSS中劃定每個元素都有自身的盒子模子（相稱一劃定了這個元素怎樣顯現）；
• 然後可視化花樣模子則是把這些盒子模子依據劃定規矩擺放到頁面上，也就是怎樣規劃；
• 換句話說，盒子模子劃定了怎樣在頁面上擺放盒子，盒子的相互作用等等；
• CSS的可視化花樣模子就是劃定了瀏覽器在頁面中怎樣處置懲罰文檔樹

1、關鍵字：

• 包括塊（Containing Block）、
• 掌握框（Controlling Box）、
• BFC(Block Formatting Context)、
• IFC(Inline Formatting Context)、
• 定位系統、
• 浮動等

2、CSS三種定位機制：一般流、浮動流、相對定位

3、包括塊

• 一個元素的box的定位和尺寸，會與某一矩形框有關，這個框就稱之為包括塊。
• 元素h會為它的子孫元素建立包括塊，然則，並不是說元素的包括塊就是它的父元素，元素的包括塊與它的先人元素的款式有關：

• 比如：

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

  • absolute的包括塊由他近來的position屬性值不為static的先人元素建立：

    • 假如其先人元素是行內元素，則包括塊取決於其先人元素的direction特徵；
    • 假如先人元素不是行內元素，那末包括塊的地區應該是先人元素的內邊距邊境。

4、掌握框(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劃定規矩襯着