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

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

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

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

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

包含塊（Containing Block）、

控制框（Controlling Box）、

BFC(Block Formatting Context)、

IFC(Inline Formatting Context)、

定位體系、

浮動(dòng)等

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

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

譬如：

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

static和relative的包含塊由他最近的塊級(jí)、單元格或者行內(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)邊距邊界。

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

塊框

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

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

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

匿名塊框的生成：

        

            some inline text
            
more text
        

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

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

行內(nèi)框

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

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

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

        

            some  
            more text
            text
        

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

display屬性的影響

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

block，元素生成一個(gè)塊框；

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

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

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

總結(jié)：

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

如果一個(gè)框里，沒有任何塊級(jí)元素，那么這個(gè)框里的內(nèi)容會(huì)被當(dāng)成行內(nèi)框來(lái)格式化，因?yàn)槔锩娴膬?nèi)容時(shí)按照順序成行的排列。

FC（Formatting Context）

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

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

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

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

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

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

BFC渲染規(guī)則

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

BFC特點(diǎn)：

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

box的垂直方向由margin決定，屬于同一個(gè)BFC的兩個(gè)box間的margin會(huì)重疊；

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

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里的子元素不會(huì)影響到外面的元素，反之也是如此；

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算（不會(huì)浮動(dòng)塌陷如overflow：hidden清除浮動(dòng)就是這個(gè)原理）；

如何觸發(fā)BFC

根元素；

float屬性不為none；

position為absolute或fixed；

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

overflow不為visible

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

IFC規(guī)則

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

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

行框：

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

行框的規(guī)則：

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

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

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

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

總結(jié)：

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