css包含块

_gao88

已于 2024-02-21 10:26:41 修改

阅读量526

点赞数 11

文章标签： css 前端

于 2024-02-21 10:16:25 首次发布

本文链接：https://blog.csdn.net/qq_41342444/article/details/136204449

版权

一个元素的盒子的位置和大小有时是相对于一个特定的矩形来计算的，这个矩形被称为元素的包含块。

包含块英语全称为containing block，在 CSS 规范中也是明确书写了的：

确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：

如果 position 属性为 static、relative 或 sticky，包含块可能由它的最近的祖先块元素（比如说 inline-block, block 或 list-item 元素）的内容区的边缘组成，也可能会建立格式化上下文 (比如说 a table container, flex container, grid container, 或者是 the block container 自身)。
如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成。
如果 position 属性是 fixed，在连续媒体的情况下 (continuous media) 包含块是 viewport ,在分页媒体 (paged media) 下的情况下包含块是分页区域 (page area)。
如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：
1. transform 或 perspective 的值不是 none
2. will-change 的值是 transform 或 perspective
3. filter 的值不是 none 或 will-change 的值是 filter（只在 Firefox 下生效）。
4. contain 的值是 layout、paint、strict 或 content（例如：contain: paint;）
5. backdrop-filter 的值不是 none（例如：backdrop-filter: blur(10px);）