contain 需 layout 与 paint 成对使用且容器须有显式尺寸，display 类型需匹配，否则静默失效；strict 等价于 layout paint style，动画根节点用 strict 会截断 filter 效果。
contain 本身不直接“限制重绘”，它通过创建渲染边界来减少重绘范围——但写错值、漏配条件或用在错误 display 类型上，contain 会静默失效，甚至加重卡顿。
contain: layout paint 必须成对出现才真正隔离绘制
只写 contain: layout 或只写 contain: paint，浏览器不会报错，但也不会切断绘制扩散。子元素图片加载、文字换行、transform 动画仍可能触发父容器外的重绘区域闪烁。
-
contain: layout paint是最小有效组合：layout 切断布局外溢，paint 切断绘制外溢，二者缺一不可 - 单独加
contain: style对重绘无实质帮助，它只隔离 CSS 变量和伪类计算，不影响像素级绘制 - 若需完全隔离（如弹窗、卡片列表项），直接用
contain: strict，等价于layout paint style
显式尺寸是 contain 生效的硬性前提
即使写了 contain: layout paint，只要容器高度不可预测，浏览器就忽略该声明——DevTools 的 Layers 面板里看不到新图层，getComputedStyle(el).contain 返回 layout paint 也不代表真生效。
- 以下写法均无效：
height: auto、min-height: min-content、width: fit-content、flex 容器中flex: 1且父级无固定高度 - 稳妥做法：设
min-height: 200px+max-height: 600px+overflow-y: auto，下限防塌陷，上限锁死重绘区域 - 对图片占位容器，优先用
contain: size配合contain-intrinsic-size: 300px / 200px，而非强行塞 layout
display 类型不匹配会导致 contain 被完全忽略
contain 在非块级/非 flex/grid 容器上被浏览器静默跳过，常见于误用 display: inline 或 inline-block 的卡片、按钮包裹层。
- 检查 computed 样式中
display值是否为block、flex、grid或table等支持 containment 的类型 - 绝对定位元素（
position: absolute）加contain: layout paint会改变其 containing block，导致top/left计算基准偏移——应确保父级有position: relative且尺寸可控 - 服务端渲染或 JS 动态插入的节点，必须在 DOM 插入后、首次渲染前手动设置
el.style.contain = 'layout paint'，否则样式规则来不及介入
验证是否真生效：别信 computed，看 Paint Flashing
Chrome DevTools → Rendering → 开启 Paint Flashing，滚动或触发子元素变化时，闪光区域必须严格限制在容器边界内。一旦外溢，说明隔离失败。
- 闪光外溢的常见原因：内部
img或iframe加载未设宽高、父容器由子元素撑开形成循环依赖、用了content-visibility: auto却没配contain-intrinsic-size像素值 -
contain: layout paint和content-visibility: auto可共存，但后者必须配contain-intrinsic-size: 80px（不能是em或%） - 最易被忽略的一点：动画根节点若套了
contain: strict，会截断filter或backdrop-filter效果，视觉上“消失”不是 bug，是隔离生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
