包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那个大盒子。元素有positon属性就必然涉及到包含块。
1、初始包含块(Initial containing block),即根元素的包含框。
2、position:static|relative 元素包含块为最近的块级【block|list-item|table】父元素的内容框content-box
3、positon:absolute 的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。【没有的话包含块就是初始包含块】
- 如果 'direction' 是 'ltr',包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ,右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges)
-
如果 'direction' 是 'rtl',包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ,左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)
4、positon:fixed 元素的包含块是由viewport(用户网页的可视区域)决定的,和根元素无关。