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-boxeshttp://www.w3.org/TR/CSS2/visuren.html#propdef-displayhttp://www.w3.org/TR/CSS2/visuren.html#block-formattinghttp://www.w3.org/TR/CSS2/visuren.html#inline-boxes
http://www.w3.org/TR/CSS2/visudet.html#containing-block-details