关于Containing block

一、什么是containing block

Containing block，翻译成中文也就是包含块，在CSS的visual formatting model（可视化模型）中是个很重要的概念，因为盒子的宽度/高度的自动值/相对值的计算，相对/浮动/绝对定位，都要依赖containing block。

二、如何判断盒子的containing block

containing block的判定很重要，熟悉理解了各种position下盒子的containing block，可以方便我们更快速的布局。一图胜千言，理解了下面这张图，关于containing block基本也理解透彻了。

  （图片来自http://w3help.org/zh-cn/kb/008/）

下面分类说明：

根元素

根元素，是处于文档树顶端的元素，在（X）HTMl中，根元素就是html元素，它没有父节点。

根元素的包含块，叫做initial containing block（初始包含块），它的direction属性与html元素一致，它的尺寸与定位与VIewport一致（一致但并不等同），而Viewport尺寸固定为浏览器的工作区域尺寸 - 垂直/水平滚动条尺寸。（更详细的解释参考http://www.cnblogs.com/fsjohnhuang/p/5295859.html）

静态定位元素和相对定位元素

position为relative或者static的元素（未声明position的元素默认为static），它的包含块由它最近的块级、单元格（table cell）或者行内框（inline-block）祖先元素的内容框（content box）创建。

固定定位元素

固定定位（fixed）的元素，它的包含块是当前可视窗口。

绝对定位元素

总的来说，绝对定位（absolute）元素的包含块由离它最近的position为非static的祖先元素创建，根据情况可分类：

1.如果没有非static祖先元素，那么它的containing block就是initial containing block（初始包含块）。

2.存在非static祖先元素，且祖先元素为行内元素，则

若祖先元素的direction为ltr(left to right),那么绝对定位元素的包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ，右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges)  （ 祖先元素的 第一个元素左上，最后元素右下) 若祖先元素的direction为ltr(left to right),那么绝对定位元素的包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ，左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)（ 祖先元素的 第一个元素右上，最后元素左下 )

此条内容图例解释可参考http://w3help.org/zh-cn/kb/008/

3.祖先元素不是行内元素，那么包含块的的区域是祖先元素的内边距边界（padding edges）

三、最后

总结本文参考了以下几篇文章：

containing block   http://www.cnblogs.com/chengzhenping/p/3488107.html

KB008: 包含块( Containing block )   http://w3help.org/zh-cn/kb/008/

CSS魔法堂：不得不说的Containing Block  http://www.cnblogs.com/fsjohnhuang/p/5295859.html

感谢前人栽阴！

转载于:https://www.cnblogs.com/adventureofraindrop/p/6130632.html