absolute的containing block计算方式跟正常流有什么不同？

轩辕小不懂发布于 2021-12-07 15:38

阅读 490

答案 1

分类：WEB前端开发

CSS

2590

小柒 2021-12-07 15:50

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

1. 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区

域) 的最小矩形；

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

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

补充：

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

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

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

1 关注

提出于 2021-12-07 15:38

全部

490 阅读

490 阅读

490 阅读

490 阅读

490 阅读

490 阅读