css包含块

_gao88

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

阅读量699

点赞数 11

文章标签： css 前端

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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/qq_41342444/article/details/136204449

版权

本文详细解释了CSS中的包含块概念，涉及position属性对包含块的影响，以及不同position值时的包含块来源。特别提到了根元素的初始包含块和浏览器间关于perspective和filter属性影响的不一致性。参考MDN的CSS层叠样式表指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是包含块

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

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

https://drafts.csswg.org/css2/#containing-block-details

确定包含块

确定一个元素的包含块的过程完全依赖于这个元素的 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);）

备注： 根元素（<html>）所在的包含块是一个被称为初始包含块的矩形。它具有视口（对于连续媒体）或页面区域（对于分页媒体）的尺寸。

备注： perspective 和 filter 属性对形成包含块的作用存在浏览器之间的不一致性。

详情请看：布局和包含块 - CSS：层叠样式表 | MDN

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。