摘要：視覺(jué)格式化模型瀏覽器在解析渲染我們所寫(xiě)的內(nèi)容，順序渲染普通文檔流。渲染結(jié)果如下圖這兒有一個(gè)知識(shí)點(diǎn)文檔流按我的理解就是在瀏覽器渲染顯示的一個(gè)模式，這個(gè)模式的特點(diǎn)自上而下，從左到右排列規(guī)則。如果不特殊指定，瀏覽器會(huì)默認(rèn)當(dāng)前的渲染是按文檔流模式。

瀏覽器在解析渲染我們所寫(xiě)的html內(nèi)容，順序渲染（普通文檔流）。

  
    
1
    
2
    
3
    
4
  

渲染結(jié)果如下圖

這兒有一個(gè)知識(shí)點(diǎn)：
1、文檔流：按我的理解就是html在瀏覽器渲染顯示的一個(gè)模式，這個(gè)模式的特點(diǎn)：自上而下，從左到右（排列規(guī)則）。如果不特殊指定，瀏覽器會(huì)默認(rèn)當(dāng)前的HTML渲染是按文檔流模式。
2、浮動(dòng)：平時(shí)我們所知的脫離文檔流的一種方式，把html元素的布局更改，浮動(dòng)在視圖層上
3、絕對(duì)定位：脫離文檔流的另外一種方式，也是渲染在視圖層上

這兒又有個(gè)知識(shí)點(diǎn)：css盒模型

盒模型是css渲染的時(shí)候抽象于html標(biāo)簽在畫(huà)布所占有區(qū)域，由CSS引擎根據(jù)文檔中的內(nèi)容所創(chuàng)建。

盒模型的關(guān)鍵屬性：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)。

盒模型是有兩種標(biāo)準(zhǔn)的，一個(gè)是標(biāo)準(zhǔn)模型，一個(gè)是IE模型。

從圖中很直觀能看出來(lái)，兩種模型的寬度和高度的計(jì)算規(guī)則不一樣。

在css中，兩個(gè)模型的定義方式為：

/* 標(biāo)準(zhǔn)模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

視覺(jué)格式化模型會(huì)根據(jù)CSS盒子模型將文檔中的元素轉(zhuǎn)換為一個(gè)個(gè)盒子。

每個(gè)盒子的布局由以下因素決定：

盒子的尺寸：精確指定、由約束條件指定或沒(méi)有指定
盒子的類型：行內(nèi)盒子（inline）、行內(nèi)級(jí)盒子（inline-level）、原子行內(nèi)級(jí)盒子（atomic inline-level）、塊盒子（block）
定位方案（positioning scheme）：普通流定位、浮動(dòng)定位或絕對(duì)定位
文檔樹(shù)中的其它元素：即當(dāng)前盒子的子元素或兄弟元素
視口尺寸與位置
所包含的圖片的尺寸
其他的某些外部因素

該模型會(huì)根據(jù)盒子的包含塊（containing block）的邊界來(lái)渲染盒子。通常，盒子會(huì)創(chuàng)建一個(gè)包含其后代元素的包含塊，但是盒子并不由包含塊所限制，當(dāng)盒子的布局跑到包含塊的外面時(shí)稱為溢出（overflow）

在這兒把我們用到的術(shù)語(yǔ)做一個(gè)解釋說(shuō)明：

塊：block，一個(gè)抽象的概念，一個(gè)塊在文檔流上占據(jù)一個(gè)獨(dú)立的區(qū)域，塊與塊之間在垂直方向上按照順序依次堆疊。
包含塊：containing block，包含其他盒子的塊稱為包含塊。
盒子：box，一個(gè)抽象的概念，由CSS引擎根據(jù)文檔中的內(nèi)容所創(chuàng)建，主要用于文檔元素的定位、布局和格式化等用途。盒子與元素并不是一一對(duì)應(yīng)的，有時(shí)多個(gè)元素會(huì)合并生成一個(gè)盒子，有時(shí)一個(gè)元素會(huì)生成多個(gè)盒子（如匿名盒子）。
塊級(jí)元素：block-level element，元素的 display 為 block、list-item、table 時(shí)，該元素將成為塊級(jí)元素。元素是否是塊級(jí)元素僅是元素本身的屬性，并不直接用于格式化上下文的創(chuàng)建或布局。
塊級(jí)盒子：block-level box，由塊級(jí)元素生成。一個(gè)塊級(jí)元素至少會(huì)生成一個(gè)塊級(jí)盒子，但也有可能生成多個(gè)（例如列表項(xiàng)元素）。我們查詢資料會(huì)看到：塊格式化上下文（Block Formatting Context，BFC），就是當(dāng)前的區(qū)域。
塊盒子：block box，如果一個(gè)塊級(jí)盒子同時(shí)也是一個(gè)塊容器盒子（見(jiàn)下），則稱其為塊盒子。除具名塊盒子之外，還有一類塊盒子是匿名的，稱為匿名塊盒子（Anonymous block box），匿名盒子無(wú)法被CSS選擇符選中。
塊容器盒子：block container box或block containing box，塊容器盒子側(cè)重于當(dāng)前盒子作為“容器”的這一角色，它不參與當(dāng)前塊的布局和定位，它所描述的僅僅是當(dāng)前盒子與其后代之間的關(guān)系。換句話說(shuō)，塊容器盒子主要用于確定其子元素的定位、布局等。

注意：盒子分為“塊盒子”和“塊級(jí)盒子”兩種，但元素只有“塊級(jí)元素”，而沒(méi)有“塊元素”。下面的“行內(nèi)級(jí)元素”也是一樣。

行內(nèi)級(jí)元素：inline-level element，display 為 inline、inline-block、inline-table 的元素稱為行內(nèi)級(jí)元素。與塊級(jí)元素一樣，元素是否是行內(nèi)級(jí)元素僅是元素本身的屬性，并不直接用于格式化上下文的創(chuàng)建或布局。
行內(nèi)級(jí)盒子：inline-level box，由行內(nèi)級(jí)元素生成。行內(nèi)級(jí)盒子包括行內(nèi)盒子和原子行內(nèi)級(jí)盒子兩種，區(qū)別在于該盒子是否參與行內(nèi)格式化上下文的創(chuàng)建。行內(nèi)格式化上下文（inline formatting context， IFC），就是當(dāng)前區(qū)域。
行內(nèi)盒子：inline box，參與行內(nèi)格式化上下文創(chuàng)建的行內(nèi)級(jí)盒子稱為行內(nèi)盒子。與塊盒子類似，行內(nèi)盒子也分為具名行內(nèi)盒子和匿名行內(nèi)盒子（anonymous inline box）兩種。
原子行內(nèi)級(jí)盒子：atomic inline-level box，不參與行內(nèi)格式化上下文創(chuàng)建的行內(nèi)級(jí)盒子。原子行內(nèi)級(jí)盒子一開(kāi)始叫做原子行內(nèi)盒子（atomic inline box），后被修正。原子行內(nèi)級(jí)盒子的內(nèi)容不會(huì)拆分成多行顯示。

當(dāng)元素的 display 為 block、list-item 或 table 時(shí)，該元素將成為塊級(jí)元素。一個(gè)塊級(jí)元素會(huì)被格式化成一個(gè)塊（例如文章的一個(gè)段落），默認(rèn)按照垂直方向依次排列。

比較生硬的知識(shí)BFC，IFC，后面的說(shuō)明中會(huì)用到：

創(chuàng)建BFC區(qū)域的方式：

根元素或包含根元素的元素
浮動(dòng)元素（元素的 float 不是 none）
絕對(duì)定位元素（元素的 position 為 absolute 或 fixed）
行內(nèi)塊元素（元素的 display 為 inline-block）
表格單元格（元素的 display為 table-cell，HTML表格單元格默認(rèn)為該值）
表格標(biāo)題（元素的 display 為 table-caption，HTML表格標(biāo)題默認(rèn)為該值）
匿名表格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認(rèn)屬性）或 inline-table）
overflow 值不為 visible 的塊元素
display 值為 flow-root 的元素
contain 值為 layout、content或 strict 的元素
彈性元素（display為 flex 或 inline-flex元素的直接子元素）
網(wǎng)格元素（display為 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
column-span 為 all 的元素始終會(huì)創(chuàng)建一個(gè)新的BFC，即使該元素沒(méi)有包裹在一個(gè)多列容器中

BFC對(duì)浮動(dòng)定位與清除浮動(dòng)都很重要。浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè)BFC內(nèi)的元素。浮動(dòng)不會(huì)影響其它BFC中元素的布局，而清除浮動(dòng)只能清除同一BFC中在它前面的元素的浮動(dòng)。外邊距折疊也只會(huì)發(fā)生在屬于同一BFC的塊級(jí)元素之間

BFC區(qū)域內(nèi)模型的規(guī)則：

1、內(nèi)部的box會(huì)在垂直方向，一個(gè)接一個(gè)的放置
2、每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸（對(duì)于從左往右的格式化，否則相反）
3、box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊
4、BFC的區(qū)域不會(huì)與浮動(dòng)區(qū)域的box重疊
5、BFC是一個(gè)頁(yè)面上的獨(dú)立的容器，外面的元素不會(huì)影響B(tài)FC里的元素，反過(guò)來(lái)，里面的也不會(huì)影響外面的
6、計(jì)算BFC高度的時(shí)候，浮動(dòng)元素也會(huì)參與計(jì)算

來(lái)看一個(gè)例子，margin重疊的問(wèn)題：

  
  
  
  
  



    

        
上
        margin-bottom:30px;
    
    

        
下
        margin-top:50px;
    

上述視圖效果，上下邊距重疊取最大的值。

用BFC可以解決垂直margin重疊的問(wèn)題

    
上
    margin-bottom:30px;
  

  
  

    

      
下
      margin-top:50px;
    
  

每個(gè)塊級(jí)盒子都會(huì)參與塊格式化上下文（block formatting context）的創(chuàng)建，而每個(gè)塊級(jí)元素都會(huì)至少生成一個(gè)塊級(jí)盒子，即主塊級(jí)盒子（principal block-level box）。有一些元素，比如列表項(xiàng)會(huì)生成額外的盒子來(lái)放置項(xiàng)目符號(hào)，而那些會(huì)生成列表項(xiàng)的元素可能會(huì)生成更多的盒子。不過(guò)，多數(shù)元素只生成一個(gè)主塊級(jí)盒子。

主塊級(jí)盒子包含由后代元素生成的盒子以及內(nèi)容，同時(shí)它也會(huì)參與定位方案。

定位規(guī)則：一旦生成了盒子以后，CSS引擎就需要定位它們以完成布局。下面是定位盒子時(shí)所使用的規(guī)則：

普通流：按照次序依次定位每個(gè)盒子
浮動(dòng)：將盒子從普通流中多帶帶拎出來(lái)，將其放到外層盒子的某一邊
絕對(duì)定位：按照絕對(duì)位置來(lái)定位盒子，其位置根據(jù)盒子的包含元素所建立的絕對(duì)坐標(biāo)系來(lái)計(jì)算，因此絕對(duì)定位元素有可能會(huì)覆蓋其他元素

一個(gè)塊級(jí)盒子可能也是一個(gè)塊容器盒子。塊容器盒子（block container box）要么只包含其它塊級(jí)盒子，要么只包含行內(nèi)盒子并同時(shí)創(chuàng)建一個(gè)行內(nèi)格式化上下文（inline formatting context）。

能夠注意到塊級(jí)盒子與塊容器盒子是不同的這一點(diǎn)很重要。前者描述了元素與其父元素和兄弟元素之間的行為，而后者描述了元素跟其后代之間的行為。有些塊級(jí)盒子并不是塊容器盒子，比如表格；而有些塊容器盒子也不是塊級(jí)盒子，比如非替換行內(nèi)塊和非替換表格單元格。

一個(gè)同時(shí)是塊容器盒子的塊級(jí)盒子稱為塊盒子（block box）。

在某些情況下進(jìn)行視覺(jué)格式化時(shí)，需要添加一些增補(bǔ)性的盒子，這些盒子不能用CSS選擇符選中，因此稱為匿名盒子（anonymous boxes）。

CSS選擇器不能作用于匿名盒子(anonymous boxes)，所以它不能被樣式表賦予樣式。也就是說(shuō)，此時(shí)所有可繼承的 CSS 屬性值都為 inherit ，而所有不可繼承的 CSS 屬性值都為 initial。

塊包含盒子可能只包含行內(nèi)級(jí)盒子，也可能只包含塊級(jí)盒子，但通常的文檔都會(huì)同時(shí)包含兩者，在這種情況下，就會(huì)在相鄰的行內(nèi)級(jí)盒子外創(chuàng)建匿名塊盒子。

假如div和p標(biāo)簽都保持默認(rèn)樣式（即它們的 display 為 block）：

Some inline text 
followed by a paragraph
 followed by more inline text.

此時(shí)會(huì)產(chǎn)生兩個(gè)匿名塊盒子：一個(gè)是

元素前面的那些文本（Some inline text），另一個(gè)是

元素后面的文本（followed by more inline text.）。此時(shí)會(huì)生成下面的塊結(jié)構(gòu)：

對(duì)這兩個(gè)匿名盒子來(lái)說(shuō)，程序員無(wú)法像

元素那樣控制它們的樣式，因此它們會(huì)從

Some inline text followed by a paragraph followed by more inline text.

   The text in the span can be split in several
   lines as it is an inline box.

   The text in the span cannot be split in several
   lines as it is an inline-block box.

  
  
  
  
  



  

    float
    inline box
    primary
  

• 上一篇：Grid布局——頁(yè)面布局如此簡(jiǎn)單
• 下一篇：CSS 從入門(mén)到放棄系列：CSS的引入方式