CSS 概念 Block Inline Containing block

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

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

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

巴特西

CSS 概念 Block Inline Containing block

最新文章

热门文章