关于containing block

containing block影响一个元素的尺寸和位置。但是在不同情况下containing block的所表示的内容是不一样的。

前置知识box:

首先看一个box的结构如下图：

(图片来源：https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block)

 

首先明确一点，一个元素的containing block收到此元素自身的position属性的影响。

分类：

 

1、当前元素的position 为 static 或 relative

      则containing block表示的区域为，该元素最接近的父类的content box。

 

2、当前元素的position 为 absolute

      则containing block表示的区域为，该元素最接近的父类的padding box。注意，父类要有position（fixed, absolute, relative, sticky）, postion 不能是static, 如果不设置position默认为static。

       如果父类元素的position属性全为static, 则为body。

     比如，设p的position为absolute：

     

     若b的position不为static，则containing block的区域为 b 的padding box。

     若b的position为static, a的不为static，则containing block的区域为 b 的padding box。

     若a、b的position皆为static， 则containing block为body的padding box。

 

3、当前元素的position 为 fixed

      则containing block表示的区域为，当前浏览器窗口。

4、还有第四种情况，在当前元素为absolute or fixed时，最接近的父类有一下属性值，

   （1）tansform or perspective

     (2)  will-change

     (3) filter

 

详细参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block