css包含块

包含块的定义（个人理解）

根元素（html）称为初始包含块。
css 包含块通常是指包含这个元素的最近的块类型的祖先元素。（如果父元素是 inline，则继续寻找父元素的父元素，以此类推）。但也有些例外情况，下面会介绍到。

确定包含块

为什么要确定一个元素的包含块呢？又是如何确定呢？
首先我们介绍下包含块的作用，包含块会直接影响到子元素的大小和位置，确定了包含块，我们才能知道当这个元素的 width、height、margin、padding、left、right、bottom、top 等属性使用百分比时是相对谁的百分之多少。
确定包含块和 css 中的 position 属性息息相关。

• position 为 static 和 relative 的（未脱离文档流的），包含块为离它最近的祖先块元素的内容区content（标准盒子模型即由 width 相关属性和 height 相关属性决定）
• position 为 absolute 的，包含块为离它最近的 position 非 static 的祖先元素的内容区 content 和 内边距 padding 之和
• position 为 fixed 的， 包含块为 视口 viewport。
• position 为 absolute 和 fixed 的元素的包含块也受到其他属性的影响，举一个常用的 transform 属性，若是其祖先元素的有 transform 属性，且 transform 值不为 none, 则这个祖先元素就是其包含块。