containing block

1(position:static和relative)

它的包含块由它最近的块级、单元格(table cell)或者行内块(inline-block)祖先元素创建。

2.position:fixed

如果元素是固定定位元素,那么它的包含块是当前可视窗口

3.position:absolute

总的来说,绝对定位("position: absolute")元素的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。

1)

如果其祖先元素是行内元素,则包含块取决于其祖先元素的 'direction' 特性

一. 如果 'direction' 是 'ltr',包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ,右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges)  (记着:第一元素左上,最后元素右下)

二。如果 'direction' 是 'rtl',包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ,左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)(记着:第一元素右上,最后元素左下)

如果祖先元素不是行内元素,那么包含块的区域应该是祖先元素的内边距边界

iniital containing block就是   “初始viewport“

The initial containing block cannot be positioned or floated

background属性仅仅作用于content 和padding

The background of the box generated by the root element covers the entire canvas.

direction bidi  http://blog.ieph.net/archives/446  (太技术流了吧~~)

height property

1,height的百分比是相对于containingblock来计算的(这点不用怀疑).

2,对于position不为absolute的元素,如果containingblock没有设置height属性,即height:auto那么这个百分比是相对于auto的,所以还是auto;

3,如果这个元素是absolute的,那么这个元素的containingblock的高度等于元素的高度本身,所以这个absolute的元素的百分比可以根据containingblock来自适应

原文地址:https://www.cnblogs.com/chengzhenping/p/3488107.html