CSS 概念 Block Inline Containing block

Block 元素 包括 "block-level box," "block container box," and "block box"

首先 display有如下幾個屬性 inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

block-level boxes: display 爲 block | list-item | table

block container boxes: 當設置 display 爲 block | list-item | inline-block | table | inline-table | table-cell | table-caption (本身測試總結)

block boxes: block-level boxes that are also block containers are called block boxes.

幾點說明:
1. a block-level box is also a block container box
2. Not all block container boxes are block-level boxes, 好比 table-cell | inline-block
3. Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes

-----------------------------------------------------------------------------------

Inline 元素

Inline-level boxes: 當設置 display 'inline', 'inline-table', and 'inline-block'
Inline boxes: Inline-level boxes that are not inline boxes, 好比 'inline-table', and 'inline-block'

-----------------------------------------------------------------------------------
containing block

默認元素的 position 是 static。 其它屬性有 relative, absolute, fixed

position: static | relative
the containing block is formed by the content edge of the nearest block container ancestor box.

position: fixed
the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.(跟它的包裹元素設置 position: relative 或 absolute 沒有關係)

position: absolute:
If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'.
If there is no such ancestor, the containing block is the initial containing block(initial C.B.).
若是全部元素都沒有設置 position， 那麼html 是 initial C.B. (UA-dependent)

參考文獻：
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
http://www.w3.org/TR/CSS2/visuren.html#propdef-display
http://www.w3.org/TR/CSS2/visuren.html#block-formatting

http://www.w3.org/TR/CSS2/visuren.html#inline-boxes

http://www.w3.org/TR/CSS2/visudet.html#containing-block-details