CSS2.1 視覺格式化模型 - 盒的生成

基本概念

概述

• 視覺格式化模型：用戶代理User Agent如何在視覺媒體Visual Media下處理文檔樹Document Tree。

• 視覺格式化模型會根據CSS盒子模型將文檔中的元素轉換爲一個個盒子，每一個盒子的佈局由如下因素決定：

  • 盒子的尺寸：精確指定、由約束條件指定或沒有指定

  • 盒子的類型：行內盒子（inline）、行內級盒子（inline-level）、原子行內級盒子（atomic inline-level）、塊盒子（block）

  • 定位方案（positioning scheme）：普通流定位、浮動定位或絕對定位

  • 文檔樹中的其它元素：即當前盒子的子元素或兄弟元素

  • 視口尺寸與位置

  • 所包含的圖片的尺寸

  • 其餘的某些外部因素

視口 The Viewport

• 在連續媒體Continuous Media上工做的用戶代理通常會向用戶提供一個視口（屏幕上的一個窗口或其它可視區域）來幫助用戶訪問文檔。用戶代理能夠在調整視口大小的同時改變文檔的佈局（見初始包含塊Initial Containing Block）。

• 若是視口小於渲染文檔的畫布區域，用戶代理應提供一個滾動機制。每一個畫布最多有一個視口，但用戶代理能夠把文檔渲染到多個畫布上（即爲相同文檔提供不一樣視圖）。

包含塊 Containing Blocks

• CSS2.1中，許多盒的定位和大小都根據一個名爲包含塊Containing Block的矩形盒的邊緣來計算。

• 通常地：

  • 生成的盒會充當其後代盒的包含塊；

  • 咱們稱盒爲其後代「建立」了包含塊。

  • 說「盒的包含塊」便是說「盒所處的包含塊」，而不是盒所產生的包含塊。

• 每一個盒會被賦予一個相對於其包含塊的位置，但它不會被侷限在其包含塊內；它有可能溢出。

• 包含塊的尺寸如何計算的細節將在下章講述。

• 「根元素」的包含塊（初始包含塊）由用戶代理定義（瀏覽器）。在HTML中，根元素就是html元素，（部分瀏覽器根元素是body）。在大多數瀏覽器中，初始包含塊是一個視窗大小的矩形（不等同於視窗，只是大小相等）

• 對於非根元素，若是position值是relative或者static，包含塊則是最近的塊級框。或者：表單元格或行內塊祖先框的內容邊界

• 對於非根元素，若是position值是absolute，包含塊爲最近的position值不是static的祖先元素（能夠是任何類型）。具體過程以下：

  • 若是這個祖先元素是塊元素，包含塊則設置爲該元素的內邊距邊界；換句話說，就是由邊框界定的區域

  • 若是沒有祖先元素，或者全部的祖先元素都沒有開啓定位，元素的包含塊定義爲初始包含塊

• 對於定位的元素：只是包含塊的邊界與父元素的邊框相同，可是由於left、top的默認值是auto，因此不影響padding對子元素的做用，設置了padding以後子元素並不會黏在父元素的邊框上

可替換元素和不可替換元素

• 從元素自己的特色來說，能夠分爲可替換元素(replaceable element)和不可替換元素(none-replaceable element)。

可替換元素

• 在 CSS中，可替換元素（replaced element）的展示效果不是由 CSS 來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立於 CSS 的。

• 簡單來講，它們的內容不受當前文檔的樣式的影響。CSS 能夠影響可替換元素的位置，但不會影響到可替換元素自身的內容。某些可替換元素，例如<iframe> 元素，可能具備本身的樣式表，但它們不會繼承父文檔的樣式。

• 可替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。

• CSS 能對可替換元素產生的惟一影響在於，部分屬性支持控制元素內容在其框中的位置或定位方式

• 推論：replaced element之因此冠以replaced的形容詞，是由於這類element的內容會被指向的外部資源給replace掉，經過src屬性

• 典型的可替換元素有：

  • <iframe>

  • <img>

  • <video>

• 有些元素僅在特定狀況下被做爲可替換元素處理，例如：

  • <option>

  • <audio>

  • <canvas>

• HTML 規範也說了 <input>元素可替換，由於 "image" 類型的<input>元素就像<img>同樣被替換。可是其餘形式的控制元素，包括其餘類型的<input>元素，被明確地列爲非可替換元素（non-replaced elements）。該規範用術語小掛件（Widgets）來描述它們默認的限定平臺的渲染行爲。

css 與 可替換元素

• 用 CSS content 屬性插入的對象是匿名的可替換元素。它們並不存在於 HTML 標記中，所以是「匿名的」。

• 須要注意的是，一部分（並不是所有）可替換元素，其自己具備的尺寸和基線（baseline）會被一些 CSS 屬性用到，加入計算之中，例如 vertical-align，會只有可替換元素才能具備這種自帶值。

不可替換元素

• html 的大多數元素是不可替換元素，即其內容直接表現給用戶端（例如瀏覽器）。

• 若是元素的內容包含在文檔之中，則爲非替換元素。除了幾個可替換元素，其餘全部的都是不可替換元素。

盒的生成 Controlling Box Generation

• 本節描述CSS2.1中可生成的盒類型。盒的類型會影響其在視覺格式化模型中的表現。

• 盒子的生成是 CSS 視覺格式化模型的一部分，用於從文檔元素生成盒子。盒子有不一樣的類型，不一樣類型的盒子的格式化方法也有所不一樣。盒子的類型取決於 CSS display 屬性。

塊級元素 Block-level Elements 和 塊盒 Block Boxes

• 塊 block：，一個抽象的概念，一個塊在文檔流上佔據一個獨立的區域，塊與塊之間在垂直方向上按照順序依次堆疊。

• 元素 elements：是html的概念(與標籤一一對應)

• 盒子 box：，一個抽象的概念，由CSS引擎根據文檔中的內容所建立，主要用於文檔元素的定位、佈局和格式化等用途。盒子與元素並非一一對應的，有時多個元素會合並生成一個盒子，有時一個元素會生成多個盒子（如匿名盒子）。

  這些盒子與盒模型由對應關係嗎？content-box? margin-box?

• 框：盒的邊界，有些翻譯用於指代盒子，如行內框，實指行內盒 inline box

• 塊級元素 block-level element：

  • 元素的 display 爲 block、list-item、table時，該元素將成爲塊級元素。

  • 元素是不是塊級元素僅是元素自己的屬性，並不直接用於格式化上下文的建立或佈局。

  • 塊級元素是文檔中會被視覺格式化爲塊狀（例：段落）的元素，默認按照垂直方向依次排列。

• 塊級盒子 block-level box：

  • 由塊級元素生成。

  • 參與塊格式化上下文Block Formatting Context

  • 每一個塊級元素生成一個主要的塊級盒Principal Block-level Box來包含其後代盒和生成的內容，同時參與定位體系Positioning Scheme。

  • 某些塊級元素還會在主要盒以外產生額外的盒：list-item元素。這些額外的盒會相對於主要盒來擺放，生成額外的盒子用於放置項目符號，而那些會生成列表項的元素可能會生成更多的盒子。不過，多數元素只生成一個主塊級盒子。

• 塊盒子 block box：

  • 若是一個塊級盒子同時也是一個塊容器盒子（見下），則稱其爲塊盒子。

  • 除具名塊盒子以外，還有一類塊盒子是匿名的，稱爲匿名塊盒子（Anonymous block box），匿名盒子沒法被CSS選擇符選中，固然，匿名塊盒子也是塊容器盒子和塊級盒子

  • 注意：盒子分爲「塊盒子」和「塊級盒子」兩種，但元素只有「塊級元素」，而沒有「塊元素」。下面的「行內級元素」也是同樣。

• 塊容器盒子：

  • block container box或block containing box

  • 除了表格盒Table Boxes，和可替換元素（Replaced Elements），一個塊級盒同時也是一個塊容器盒Block Container Box

  • 塊容器盒子側重於當前盒子做爲「容器」的這一角色，它不參與當前塊的佈局和定位，它所描述的僅僅是當前盒子與其後代之間的關係。換句話說，塊容器盒子主要用於肯定其子元素的定位、佈局等。

  • 一個塊容器盒子只會有兩種狀況：

    1. 只包含塊級盒子

       這看起來也許有些奇怪，這與上文提到的匿名塊盒子有關，下文將會有詳細的講解

       爲何沒有提到 只包含塊級盒子就建立一個塊級格式化上下文呢？

    2. 只包含行內級盒子，建立一個行內格式化上下文Inline Formatting Context

• 並不是全部的塊容器盒都是塊級盒：

  • 不可替換的行內塊Bon-replaced Inline Blocks和不可替換的表格單元格Non-replaced Table Cells也是塊容器但不是塊級盒。

  • 可以注意到塊級盒子與塊容器盒子是不一樣的這一點很重要。前者描述了元素與其父元素和兄弟元素之間的行爲，然後者描述了元素跟其後代之間的行爲。

• 這三個術語，「塊級盒」、「塊容器盒」、「塊盒」在乎義明確時可簡稱爲「塊」。

  

匿名塊盒

• 在某些狀況下進行視覺格式化時，須要添加一些增補性的盒子，這些盒子不能用CSS選擇符選中，所以稱爲匿名盒子（

  anonymous boxes）
  。

• CSS選擇器不能做用於匿名盒子(

  anonymous boxes
  )，因此它不能被樣式表賦予樣式。也就是說，此時全部可繼承的 CSS 屬性值都爲 inherit ，而全部不可繼承的 CSS 屬性值都爲 initial。

狀況一

• 塊容器盒子可能只包含行內級盒子，也可能只包含塊級盒子，但一般的文檔都會同時包含二者，在這種狀況下，就會在相鄰的行內級盒子外建立匿名塊盒子。

• <div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>複製代碼

• 此時會產生兩個匿名塊盒子：一個是 <p> 元素前面的那些文本（Some inline text），另外一個是 <p> 元素後面的文本（followed by more inline text.）。此時會生成下面的塊結構：

  

• 顯示爲：

  Some inline textfollowed by a paragraphfollowed by more inline text.複製代碼

從狀況一可知：

• 當一個塊容器盒子，既包含行內級元素（生成行內級盒子），又包含塊級元素（生成塊級盒子）時，會建立匿名塊盒子包裹行內級盒子，使得塊容器盒子下只有塊級盒子

狀況二

• 另外一種會建立匿名塊盒子的狀況是一個行內盒子中包含一或多個塊盒子。此時，包含 塊盒子 的行內盒子會拆分爲兩個行內盒子，分別位於塊盒子的前面和後面。塊盒子前面的全部行內盒子會被一個匿名塊盒子包裹，塊盒子後面的行內盒子也是同樣。所以，塊盒子將成爲這兩個匿名塊盒子的兄弟盒子。

• 若是有多個塊盒子，而它們中間又沒有行內元素，則會在這些盒子的前面和後面建立兩個匿名塊盒子。

• 請看下面的例子：

  <!-- <p> 的 display 爲 inline，<span> 的 display 爲 block：-->
  <p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p>複製代碼

• 此時會產生兩個匿名塊盒子：一個是 <p> 元素前面的文本（Some *inline* text），另外一個是其以後的文本（followed by more inline text.）。此時會生成下面的塊結構：

  

從狀況二可知：

• 即便在html結構上使用行內級元素包裹塊級元素，在渲染的時候也依然是塊級盒子包裹行內級盒子，這是可使用行內及元素包裹塊級元素的真正緣由

注意：

• 對匿名盒子來講，程序員沒法像<p>元素那樣控制它們的樣式，所以它們會從包含它的非匿名盒那裏繼承那些可繼承的屬性，如 color。其餘不可繼承的屬性則會設置爲 initial，好比，由於沒有爲它們指定 background-color，所以其具備默認的透明背景，而 <p> 元素的盒子則可以用CSS指定背景顏色。相似地，兩個匿名盒子的文本顏色老是同樣的。

• 當一個元素致使了匿名塊盒的生成，則該元素上設置的屬性同樣能應用於該元素生成的盒和該元素的內容。例如，在上面例子中，若是在p元素上設置了邊框，則這個邊框將畫在C1（在行的結尾開）和C2（在行的結尾閉）周圍。

• p{  
    display:inline;  
    border:solid red; /*不可繼承*/  
    background:yellow; /*不可繼承*/  
    color:red; /*可繼承*/
  }
  span{  display:block;}複製代碼

  

• 計算百分比值時，應忽略匿名塊盒，而以最近的非匿名祖先盒來替代。例如，狀況一的div裏，若是一個匿名塊盒的子盒在須要知道其包含塊的高度來得到一個百分比高度。那麼它將使用div造成的包含塊的高度，而不是匿名塊盒的高度。

行內級元素 Inline-level Elements 和 行內盒 Inline Boxes

• 行內級元素 Inline-level Element：

  • 是在源文檔中那些不爲其內容造成新的塊、其內容分佈在多行中的元素（如，段落內着重文本，行內圖片等等)。

  • 與塊級元素同樣，元素是不是行內級元素僅是元素自己的屬性，並不直接用於格式化上下文的建立或佈局。

  • 如下的display屬性值產生一個行內級元素：inline，inline-table，以及inline-block。

• 行內級盒 Inline-level Boxes ：

  • 行內級元素生成行內級盒Inline-level Boxes，行內級盒子包括行內盒子和原子行內級盒子兩種，區別在於該盒子是否參與行內格式化上下文的建立。

• 行內盒 Inline Boxes：

  • 行內盒是一個行內級盒，且其內容參與了該行內盒的行內格式化上下文。

  • 一個display值是inline的不可替換元素會生成一個行內盒。

  • 與塊盒相似，行內盒也分爲具名行內盒和匿名行內盒（anonymous inline box）兩種。

• 原子行內級盒 Atomic Inline-level Boxes ：@

  • 那些不是行內盒的行內級盒（例如可替換的行內級元素Replaced Inline-level Elements、行內塊元素inline-block、行內表格元素inline-table）被稱爲原子行內級盒Atomic Inline-level Boxes，由於它們以單一不透明盒的形式來參與它們的行內格式化上下文。

  • 原子行內級盒子一開始叫作原子行內盒子（atomic inline box），後被修正。

  • 原子行內級盒子的內容不會拆分紅多行顯示。

  

匿名行內盒 Anonymous Inline Boxes

• 任何被直接包含在一個塊容器元素（不是包含在行內元素）的文本必須做爲匿名行內元素來對待。

• 以下：

  <p>Some <em>emphasized</em> text</p>複製代碼

• p產生一個塊盒，其中包含了一些行內盒。emphasized的盒是一個由行內元素em生成的行內盒，但其餘盒（some和text的）是由塊級元素p生成的行內盒。後面這種盒被稱做匿名行內盒，由於它們沒有相關的行內級元素。

• 這些匿名行內盒的可繼承屬性將從它們的父級塊盒中繼承。非繼承性屬性取其初始值。在上面例子中，匿名行內盒的color從p那裏繼承，但background爲transparent。

• 空白內容，根據white-space屬性，若是可被摺疊則不會產生任何匿名行內盒。

• 本規範中，若是可根據上下文來清晰界定一個匿名盒的類型，則匿名行內盒和匿名塊盒均可被簡稱爲匿名盒。

• 在格式化表格時，還會有更多類型的匿名盒出現。

Run-in Boxed 插入盒

• 爲使章節號同以前的草案一致，特保留此節。display: run-in現已定義至CSS3（參見CSS基本盒模型）。