contain block

关于containing block：

这部分是基础知识，需要掌握的点时width、height、padding、margin的百分比的数值是基于最近父元素的containing block 宽度计算的，但是transform的是百分比值是按照自身宽高计算。

关于containing block

标识containing block(包含块)的过程完全取决于元素position属性的值：

1. 如果position属性是static，relative或sticky，则包含块由最接近祖先元素的内容框的边缘形成，该元素是一个块容器（例如inline-block，block或list-item元素）或建立一个格式化上下文（例如表容器，伸缩容器，网格容器或块容器本身）。
2. 如果position属性是absolute，含块由的边缘形成填充箱，其具有最近的祖先元素的position比其他值static（fixed，absolute，relative，或sticky）。
3. 如果position属性为fixed，则包含块是由视口（对于连续媒体而言）或页面区域（对于分页媒体而言）建立的。
4. 如果position属性是absolute或fixed，则包含块也可以由具有以下内容的最近祖先元素的填充框的边缘形成：
   1. transform或perspective 除none以外的值
   2. will-change值为transform或perspective
   3. filter除了none以外的值或will-change值为filter（仅适用于Firefox浏览器）。
   4. contain值为paint（例如contain: paint;）

bounding box

bound box是一个元素的边界，可以通过DOM API：getBoundingClientRect和getComputedStyle来获取，这两个方法有些差别：

上面介绍了吸顶组件现在可以用css position:sticky 来实现，但是webkit内核之前有个bug，就是吸顶有1px的缝隙，可以用css hack解决。之前比较多的是通过js来实现吸顶的逻辑。

BFC

基本知识点，要知道浏览器布局的基本单位就是元素的BFC和IFC，边距折叠的原理，如何创建BFC和清除浮动。浮动会导致的问题是父元素高度塌陷，无法撑起父元素的高度。

定位

布局

优先级

预处理

参考：

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block