摘要：控制框塊級元素和塊框以及行內(nèi)元素和行框相關(guān)的概念。規(guī)則在行內(nèi)格式化上下文中，框一個接一個地水平排列，起點是包含塊的頂部。

CSS中規(guī)定每一個元素都有自己的盒子模型（相當(dāng)一規(guī)定了這個元素如何顯示）；

然后可視化格式模型則是把這些盒子模型按照規(guī)則擺放到頁面上，也就是如何布局；

換句話說，盒子模型規(guī)定了怎么在頁面上擺放盒子，盒子的相互作用等等；

CSS的可視化格式模型就是規(guī)定了瀏覽器在頁面中如何處理文檔樹

包含塊（Containing Block）、

控制框（Controlling Box）、

BFC(Block Formatting Context)、

IFC(Inline Formatting Context)、

定位體系、

浮動等

一個元素的box的定位和尺寸，會與某一矩形框有關(guān)，這個框就稱之為包含塊。

元素h會為它的子孫元素創(chuàng)建包含塊，但是，并不是說元素的包含塊就是它的父元素，元素的包含塊與它的祖先元素的樣式有關(guān)：

譬如：

根元素是最頂端的元素，他沒有父節(jié)點，它的包含塊就是初始化包含塊；

static和relative的包含塊由他最近的塊級、單元格或者行內(nèi)塊祖先元素的內(nèi)容框（content）創(chuàng)建；

fixed的包含塊就是當(dāng)前可視窗口；

absolute的包含塊由他最近的position屬性值不為static的祖先元素創(chuàng)建：

如果其祖先元素是行內(nèi)元素，則包含塊取決于其祖先元素的direction特性；

如果祖先元素不是行內(nèi)元素，那么包含塊的區(qū)域應(yīng)該是祖先元素的內(nèi)邊距邊界。

塊級元素和塊框以及行內(nèi)元素和行框相關(guān)的概念。

塊框

塊級元素會生成一個塊框（Block Box），塊框會占據(jù)一整行，用來包含子box和生成的內(nèi)容；

塊框同時也是一個塊包含框（Containing Box），里面要么只包含塊框，要么只包含行內(nèi)框（不能混雜）；

如果塊框內(nèi)部有塊級元素也有行內(nèi)元素，那么行內(nèi)元素會被匿名塊框包圍

匿名塊框的生成：

        

            some inline text
            
more text
        

div生成了一個塊框，包含了另一個塊框p以及文本內(nèi)容some inline text，此時文本內(nèi)容會被強(qiáng)制加到一個匿名的塊框里面，被div生成的塊框包含；

換句話說：如果一個塊框在其中包含另一個塊框，那么我們強(qiáng)迫它只能包含塊框，因此其他文本內(nèi)容生成出來的都是匿名塊框（而不是匿名行內(nèi)框）。

行內(nèi)框

一個行內(nèi)元素生成一個行內(nèi)框；

行內(nèi)元素能排在一行，允許左右有其他元素。

匿名行內(nèi)框的生成：

        

            some  
            more text
            text
        

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

display屬性的影響

display的幾個屬性也可以影響不同框的生成：

block，元素生成一個塊框；

inline，元素產(chǎn)生一個或多個的行內(nèi)框；

inline-block，元素產(chǎn)生一個行內(nèi)級塊框，行內(nèi)塊框的內(nèi)部會被當(dāng)做塊框來格式化，而此元素本身會被當(dāng)作行內(nèi)級框來格式化（這也是為什么會產(chǎn)生BFC）；

none，不生成框，不再格式化結(jié)構(gòu)中，而另一個visibility：hidden則會產(chǎn)生一個不可見的框

總結(jié)：

如果一個框里，有一個塊級元素，那么這個框里的內(nèi)容都會被當(dāng)作塊框來進(jìn)行格式化，因為只要出現(xiàn)了塊級元素，就會將里面的內(nèi)容分成幾塊，每一塊獨占一行（出現(xiàn)行內(nèi)可以用匿名塊框解決）；

如果一個框里，沒有任何塊級元素，那么這個框里的內(nèi)容會被當(dāng)成行內(nèi)框來格式化，因為里面的內(nèi)容時按照順序成行的排列。

FC（Formatting Context）

FC即格式化上下文，它定義框內(nèi)部的元素渲染規(guī)則，比較抽象，譬如：

FC就像是一個大箱子，里面裝有很多元素；

箱子可以隔開里面的元素和外面的元素（所以外部并不會影響FC內(nèi)部的渲染）；

內(nèi)部的規(guī)則可以是：如何定位、寬高計算、margin折疊等等

不同類型的框參與的FC類型不同，譬如塊級框?qū)?yīng)BFC，行內(nèi)框?qū)?yīng)IFC

注意：并不是說所有的框都會產(chǎn)生FC，而是符合特定的條件才會產(chǎn)生，只有產(chǎn)生了對應(yīng)的FC后才會應(yīng)用對應(yīng)的FC渲染規(guī)則

BFC渲染規(guī)則

在塊格式化上下文中，每一個元素左外邊與包含塊的左邊解除（對于從右到左的格式化，右外邊接觸右邊），即使存在浮動也是如此（所以浮動元素正常會直接貼近它的包含塊的左邊，與普通元素重合），除非這個元素也創(chuàng)建了一個新的BFC；

BFC特點：

內(nèi)部box在垂直方向，一個接一個的放置；

box的垂直方向由margin決定，屬于同一個BFC的兩個box間的margin會重疊；

BFC區(qū)域不會與float box重疊（可用于排版）

BFC就是頁面上的一個隔離的獨立容器，容器里的子元素不會影響到外面的元素，反之也是如此；

計算BFC的高度時，浮動元素也參與計算（不會浮動塌陷如overflow：hidden清除浮動就是這個原理）；

如何觸發(fā)BFC

根元素；

float屬性不為none；

position為absolute或fixed；

display為inline-block、flex、inline-flex、table、table-cell、table-caption

overflow不為visible

display：table，本身不會產(chǎn)生BFC，但是他會產(chǎn)生匿名框（包含display：table-cell的框），而這個匿名框產(chǎn)生BFC。

IFC規(guī)則

在行內(nèi)格式化上下文中，框一個接一個地水平排列，起點是包含塊的頂部。水平方向上的margin，border和padding在框之間得到保留，框在垂直方向上可以以不同的方式對齊；

它們的頂部或底部對齊，或根據(jù)其中文字的基線對齊

行框：

包含那些框的長方形區(qū)域，會形成一行，叫做行框。行框的寬度有它的包含塊和其中的浮動元素決定，高度的確定由行高度計算規(guī)則決定；

行框的規(guī)則：

如果幾個行內(nèi)框在水平方向上無法放入一個行框內(nèi)，它們可以分配在兩個或多個垂直堆疊的行框中（即行內(nèi)框的分割）

行框在堆疊是沒有垂直方向上的分割且永遠(yuǎn)不重疊；

行框的高度總是足夠容納所包含的所有框，不過他可能高于他包含的最高的框（例如，框?qū)R會引起基線對齊）

行框的左邊接觸到其包含塊的左邊，右邊接觸到其包含塊的右邊。

總結(jié)：

1. 行內(nèi)元素總是會應(yīng)用IFC渲染規(guī)則；
2. 行內(nèi)元素會應(yīng)用IFC規(guī)則渲染，譬如text-align可以用來居中等；
3. 塊框內(nèi)部對于文本這類的匿名元素，會產(chǎn)生匿名行框包圍，而行框內(nèi)部就應(yīng)用IFC渲染規(guī)則
4. 行內(nèi)框內(nèi)部，對于那些行內(nèi)元素，一樣應(yīng)用IFC渲染規(guī)則；
5. 另外，inline-block，會在元素外層產(chǎn)生IFC（所以這個元素可以通過text-align水平居中），當(dāng)然，它的內(nèi)部則按照BFC規(guī)則渲染