視覺格式化模型(Visual formatting model)

在可視化格式模型(Visual formatting model)當中,文檔樹中的每一個元素根據其盒模型生成0個或多個盒.這些盒的佈局由(如下因素)控制:

• 盒尺寸與類型

• 定位模式(常規流,浮動與絕對定位)

• 文檔樹中元素間的關係

• 外部信息(例如,視口大小,內含圖片的固定尺寸等等)

包含塊(containing blocks)

在 CSS2.1 中，不少框的定位和尺寸的計算，都取決於一個矩形的邊界，這個矩形，被稱做是包含塊( containing block )。 通常來講，(元素)生成的框會扮演它子孫元素包含塊的角色；咱們稱之爲：一個(元素的)框爲它的子孫節點建造了包含塊。包含塊是一個相對的概念。

絕對定位元素的包含塊

若是其祖先元素是行內元素,則包含塊取決於其祖先元素的direction特性

1. 若是direction是ltr,包含塊的頂,左邊是祖先元素生成的第一個框的頂、左內邊距邊界(padding edges),右、下邊是祖先元素生成的最後一個框的右,下內邊距邊界(padding edges)

2. 包含塊的寬度多是負的

3. 若是direction是rtl,包含塊的頂、右邊是祖先元素生成的的第一個框的頂、右內邊距邊界(padding edges),左、下邊是祖先元素生成的最後一個框的左、下內邊距邊界(padding edges)

4. 其餘狀況下，若是祖先元素不是行內元素，那麼包含塊的區域應該是祖先元素(absolute、relative 或者 fixed)的內邊界

KB008: 包含塊( Containing block )

視口(viewport)

連續媒體的用戶代理通常會給用戶提供一個視口（屏幕上的一個窗口或者視圖區域），用戶經過它來查閱文檔。視口尺寸變化（見初始包含塊）時，用戶代理可能會改變文檔的佈局

當視口比渲染文檔的畫布區域小時，用戶代理應該提供一種滾動機制。一個畫布最多對應一個視口，但用戶代理可能會渲染到多個畫布上（即提供同一文檔的不一樣視圖）

盒的生成(Box generation)

CSS視覺格式化模型的一部分工做是從文檔元素生成盒.生成的盒擁有不一樣類型,並對視覺格式化模型的處理產生影響.生成盒的類型取決於CSS屬性display

塊級元素(Block-level elements)

• 當元素的CSS屬性display爲block,list-item或table時,它就是塊級元素

• 塊級元素視覺上呈現爲塊,豎直排列

塊級盒(block-level box)

• 塊級盒用於描述他與父元素和兄弟元素之間的表現

• 塊級盒參與塊格式化上下文(block formatting context)

• 每一個塊級元素至少生成一個塊級盒,稱爲主要塊級盒(principal block-level box).一些元素,好比<li>,生成額外的盒賴放置項目符號,不過多數元素只生成一個主要塊級盒

• 主要塊級盒將包含後代元素生成的盒以及生成的內容

• 主要塊級盒是可使用定位方案(position scheme)的盒

塊容器盒(block container box)

• 塊容器盒描述跟它後代之間的影響

• 一個塊級盒也多是塊容器盒

• 塊容器盒(block container box)只包含其它塊級盒,或生成一個行內格式化上下文(inline formatting context),由此只包含行內盒

• 有些塊級盒,好比表格,可替換元素不是塊容器盒.相反,一些塊容器盒.好比非替換行內塊及非替換表格單元格,不是塊級盒

• 同時塊容器盒的塊級盒稱爲塊盒(block boxes)

匿名塊盒(Anonymous block boxes)

有時候須要添加補充性盒,這些盒稱爲匿名盒(Anonymous block boxes),它們沒有名字,不能被CSS選擇符選中

• 不能被CSS選擇符選中意味着不能用樣式表添加樣式.這意味着對於可繼承屬性,取父元素值.不可繼承屬性,取初始值

• 塊容器盒要麼只包含行內級盒(inline-level box),要麼只包含塊級盒(block-level box).但一般文檔會同時包含二者.在這種狀況下,將建立匿名塊盒來包含毗鄰的行內級盒

<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),結構以下:

另外一種將建立匿名塊盒的狀況是,一個行內盒包含了一個或幾個塊盒.在這種狀況下,包含塊盒的盒將拆分爲兩個行內盒放置於塊盒先後,而後分別由兩個匿名塊盒包含.這樣塊盒就與兩個包含行內元素的匿名塊盒造成了兄弟關係.

若是行內盒包含多個塊盒,而且這些塊盒之間沒有夾雜內容,將在這些塊盒先後建立匿名塊盒

<p style="display:inline;">
    第一個匿名盒
    <span style="display:block;">塊級盒子</span>
    第二個匿名盒
  </p>

行內級元素(inline-level elements)

• 當元素的CSS屬性display爲inline,inline-block或inline-table時,稱它爲行內級元素

• 視覺上它將內容與其它行內級元素排列爲多行.典型的如段落內容,有文本(能夠有多種格式譬如着重),或圖片,都是行內級元素

行內級盒(inline-level boxes)

• 行內級元素生成行內級盒

• 參與行內格式化上下文(inline formatting context)

• 行內級盒分爲行內盒和原子行內級盒

行內盒(inline boxes)

• 參與生成行內格式化上下文的行內級盒稱爲行內盒

• 全部display:inline的非替換元素生成的盒是行內盒

原子行內級盒(atomic inline-level boxes)

• 不參與生成行內格式化上下文的行內級盒稱爲原子行內級盒

• 這些盒由可替換行內元素,或display值爲inline-block或inline-table的元素生成,不能拆分紅多個盒

<style>
      span {
        display:inline; /* default value*/
      }
  </style>
  <div style="width:10em;">
     span 裏的文本 <span>能夠
     分紅多行由於</span>它是個行內盒。
  </div>

<style>
  span {
    display:inline-block;
  }
</style>
<div style="width:10em;">
   span 裏的文本 <span>不能分紅多行
   由於它</span> 是個行內塊盒。
</div>

匿名行內盒(Anonymous inline boxes)

相似於塊盒,CSS引擎有時自動生成行內盒.這些盒也是匿名的,由於他們沒有對應的選擇器名字.他們繼承全部可繼承的屬性,非繼承的屬性取initial

匿名行內盒最多見的例子是塊盒直接包含文本,文本將包含在匿名行內盒中.空白若是使用white-space去掉,則不會生成匿名行內盒

行盒(Lines boxes)

• 行盒由行內格式化上下文(inline formatting context)產生的盒,用於表示一行

• 在塊盒裏面,行盒從塊盒一邊排版到另外一邊.當有浮動時,行盒從左浮動的最右邊排版到右浮動的最左邊.

• 行盒是技術上的實現,開發者一般不用操心它

插入盒(Run-in boxes)

插入盒,由display:run-in定義.由後續盒的類型決定是塊盒仍是行盒.能夠用來在第一個段落中插入標題

盒的生成

定位模式(Positioning schemes)

CSS 2.1中，一個盒可能根據三種定位模式來佈局：

1. 常規流 CSS 2.1中，常規流包括塊級盒的塊格式化（block formatting），行內級盒的行內格式化和塊級與行內級盒的相對定位

2. 浮動 在浮動模型中，一個盒先根據常規流佈局，而後從流中取出來儘量地左移或右移。其它內容可能會沿着浮動（盒）的一側排列（Content may flow along the side of a float）

3. 絕對定位 在絕對定位模型中，一個盒會從常規流中所有移除（它不會影響後面的兄弟）並根據包含塊肯定位置

若是一個元素是浮動的，絕對定位的或者是根元素，它就叫流外（out of flow）（元素）。若是一個元素不是流外的，就叫流內（in-flow）（元素）。元素A的流是由A和全部最近的流外祖先爲A的流內元素組成的集合

css脫離文檔流究竟是什麼意思，脫離文檔流就不佔據空間了嗎？脫離文檔流是否是指該元素從dom樹中脫離？

常規流（Normal flow）

常規流中的盒屬於一個格式化上下文，多是塊或是行內，但不能都是（既是塊又是行內）。塊級盒參與塊格式化上下文。行內級盒參與行內格式化上下文

塊格式化上下文

行內格式化上下文

相對定位

浮動(float)

float（盒）就是一個在當前行向左或向右移動的盒。float（或者"floated"或者"floating"盒）最有意思的特性是其它內容會沿着它的一側排列（能夠經過'clear'屬性禁止這種行爲）。其它內容會沿着left-floated盒的右側，right-floated盒的左側排列。

浮動

絕對定位(Absolute positioning)

絕對定位模型中，一個盒會有相對於其包含塊的明確偏移，它會從常規流中所有移除（不會影響後面的兄弟）。一個絕對定位的盒會爲常規流中的子級和絕對（不是fixed）定位的後代創建一個新的包含塊。然而一個絕對定位的元素的內容不會沿着任何其它盒排列。它們可能會遮住其它盒的內容（或者它們自身被遮住），取決於重疊盒的堆疊層級（stack levels）

本規範中出現的絕對定位元素（或者它的盒）表示元素的'position'屬性值爲'absolute'或者'fixed'

絕對定位

分層展現(Layered presentation)

z-index

對於一個定位的盒，z-index屬性指定了：

1. 當前堆疊（stacking context）上下文中，該盒的堆疊層級（stack level）

2. 該盒是否（應該）創建一個堆疊上下文

z-index