CSS 中 block-level boxes、containing block、block formatting context 三者之間的區別和聯繫是怎樣的？

01-05

這兩天我又細看了一下 CSS 2.1 的關於 Visual formatting model 的內容 (http://www.w3.org/TR/CSS2/visuren.html)，並且畫了一張裡面提到的一些概念的關聯圖，是我邊看邊畫的，結構沒怎麼安排有點亂，希望大家拍磚。

關於你說的幾個概念：

block-level boxes

一個 block-level element ("display" 屬性值為 "block", "list-item" 或是『table』) 會生成一個 block-level box，這樣的盒子會參與到 block-formatting context (一種布局的方式) 中。
block formatting context
在這種布局方式下，盒子們自所在的 containing block 頂部起一個接一個垂直排列，水平方向上撐滿整個寬度 (除非內部的盒子自己內部建立了新的 BFC)。
containing block
一般來說，盒子本身就為其子孫建立了 containing block，用來計算內部盒子的位置、大小，而對內部的盒子，具體採用哪個 containing block 來計算，需要分情況來討論：
1. 根元素所在的 containing block 被稱為 initial containing block，在我們常用的瀏覽器環境下，指的是原點與 canvas 重合，大小和 viewport 相同的矩形；
2. 對於 position 為 static 或 relative 的元素，其 containing block 為祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的區域)；
3. 對於 position:fixed 的元素，其 containing block 由 viewport 建立；
4. 對於 position:absolute 的元素，則是先找到其祖先元素中最近的 position 屬性非 static 的元素，然後判斷：
  1. 若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
  2. 否則則由這個祖先元素的 padding box 構成。
  如果都找不到，則為 initial containing block。

基本就是規範上定義的，其中還涉及一些其他的概念，如果要了解的話可以繼續閱讀：

http://www.w3.org/TR/CSS2/visuren.html

http://www.w3.org/TR/CSS2/visudet.html

表格的布局的話比較特殊，另外研究吧。

想想瀏覽器怎麼把一個元素「畫」出來，至少要知道定位和尺寸。定位有三種normal flow, floats和absolute，無論屬於哪種首先要找所在的containing block(我翻譯為容器塊)，相當於一個大箱子里擺很多小盒子，小盒子怎麼擺取決於大箱子。

怎麼確定一個元素的containing block，由position屬性確定：

1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）

2. absolute: 向上找最近的定位為absolute/relative的元素

3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block

block formatting context(塊級格式化上下文)是一種布局特性，還是往箱子里放東西，bfc可以理解為打了"隔板"把一組小盒子分離開。

「block-level box一定會產生block formatting context」是錯誤的，block-level box須通過設置如overflow不為visible(IE6/7無效，可以設zoom)、float不為none等等來創建block formatting context。

觸發了bfc的block level box，沒有margin callapse的問題，並且邊緣不會和float box的邊緣重疊，利用它可以清浮動。

頁面上任何一個元素都可以看成box，box分block-level，inline-level和匿名的。

受邀答。

你需要對web標準進行系統的了解，具體請參考「說說標準系列」文章http://topic.csdn.net/u/20100705/09/40918be9-bb47-4477-abf0-a45801f9df34.html?93428，文章中對你提出的這幾個問題都有詳細的解說。

9.2.1 Block-level elements and block boxes

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the "display" property make an element block-level: "block", "list-item", and "table".

Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme. Some block-level elements may generate additional boxes in addition to the principal box: "list-item" elements. These additional boxes are placed with respect to the principal box.

Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes.

The three terms "block-level box," "block container box," and "block box" are sometimes abbreviated as "block" where unambiguous.

w3c鏈接：

http://www.w3.org/TR/CSS2/visuren.html#box-gen