14
2020
12

absolute 的 containing block(容器块)计算方式跟正常流有什么不同?

无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:


若此元素为 inline 元素,则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形;

否则,则由这个祖先元素的 padding box 构成。

如果都找不到,则为 initial containing block。


补充:


1. static(默认的)/relative:简单说就是它的父元素的内容框(即去掉padding的部分)


2. absolute: 向上找最近的定位为absolute/relative的元素


3. fixed: 它的containing block一律为根元素(html/body),根元素也是initial containing block

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。