contain需按场景选值：layout paint size最常用，strict适合独立浮层，content慎用于长列表；必须显式设宽高或contain-intrinsic-size，避免塌陷与重排；搭配content-visibility: auto时该值不可省略。
对复杂DOM树加 contain 能显著减少重排重绘范围，但必须按场景选值、避坑设置，否则可能让元素塌陷或动画失效。
contain: layout paint size 是最常用的安全组合
这个三值组合告诉浏览器：该元素尺寸固定、内部布局不外溢、绘制不越界。适用于下拉菜单、弹窗、列表容器等有明确边界且内容动态更新的区域。
-
layout阻止子元素影响父级或兄弟元素的布局计算，比如列表项高度变化不会触发整页重排 -
paint确保 overflow: hidden 不再是必需项，滚动时超出部分自动裁剪，避免意外溢出 -
size要求你显式声明宽高（或通过contain-intrinsic-size），否则浏览器会忽略高度导致内容塌陷
contain: strict 在动效区域更稳妥，但需确认父容器无依赖
contain: strict 等价于 contain: size layout paint style，它连 font-size、color 这类继承属性都隔离了。适合 Modal、Tooltip 这类完全独立的浮层。
- 用在
transform或opacity动画的根节点上，能避免合成层被意外合并，提升帧率 - 但若父元素样式（如
filter或backdrop-filter）需要作用于该区域，strict会让效果失效 - React 中配合
useLayoutEffect设置初始contain-intrinsic-size更可靠，避免 SSR 渲染后首屏跳动
别直接套用 contain: content，小心 layout 计算被截断
contain: content 包含 layout 和 paint，但不包含 size。它常被误用于长列表，结果是：滚动时高度不断重算，反而比不用还慢。
- 适合内容高度可变但父容器有 flex/grid 布局约束的场景（如卡片网格中的单张卡片）
- 如果父容器靠子元素撑开高度（比如
min-height: fit-content），content会让父容器高度归零 - 测试时观察
getBoundingClientRect().height是否稳定，不稳定就换size或加contain-intrinsic-size
搭配 content-visibility: auto 时，contain-intrinsic-size 不可省略
在超长列表中，content-visibility: auto 配合 contain 才能跳过离屏渲染。但漏掉 contain-intrinsic-size 会导致滚动条抽搐、内容上跳。
- 值必须是像素单位（如
contain-intrinsic-size: 120px），不能用em或百分比 - 多行文本卡片取保守估计值（比如最大行数 × 行高 + padding），宁大勿小
- 不要和
display: none混用——前者保留占位和无障碍，后者彻底移除布局空间
真正卡点不在怎么写 contain，而在你是否检查过：父容器是否用 flex/grid 替代了深层嵌套？是否在 will-change 前先设好 contain？以及，size 对应的尺寸约束有没有被 JS 动态覆盖？这些细节没对齐，contain 就只是个无效声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
