contain: layout paint 必须同时使用并配合显式尺寸（如min-height）才生效，单用layout或paint均无法完整隔离重排与重绘；二者共存才能切断布局影响链和绘制扩散链。
contain 属性只有在尺寸可控、场景匹配、写法完整时才真正生效；写错或乱加，不仅没加速，反而让元素塌陷、滚动错位、动画失效。
contain: layout paint 必须一起写，单用等于白写
只写 contain: layout，子元素改颜色、换文字、切图标，依然会触发父级样式重算；只写 contain: paint，图片加载撑高容器、文字换行变多行，父容器立刻重排。二者必须共存，才能同时切断“布局影响链”和“绘制扩散链”。
-
contain: layout paint是最小可用组合，适用于下拉菜单、弹层内容区、卡片列表项等有明确边界且内容动态的区域 - 它不包含
size，所以必须配合显式高度约束（如min-height: 200px），否则浏览器直接静默忽略 - Chrome DevTools 中看到
getComputedStyle(el).contain === "layout paint"，不代表真隔离——得看滚动帧率是否提升、Paint Flashing 是否收敛
contain: size 或 contain: strict 需要显式尺寸或 intrinsic-size
contain: size 要求浏览器能提前确认该元素的宽高，否则 layout/paint 隔离自动失效。常见失效写法：height: auto、min-height: min-content、flex: 1 且父容器无高度约束。
- 稳妥写法：
min-height: 240px; max-height: 600px; overflow-y: auto;—— 下限防塌陷，上限锁死重绘区域 - 搭配
content-visibility: auto时，contain-intrinsic-size: 80px不可省略，且必须是像素值（不能用em或%） -
contain: strict等价于size layout paint style，适合 Modal、Tooltip 这类完全独立浮层，但若父级用了filter或backdrop-filter，效果会被截断
哪些地方加了真有用，哪些加了反而坏事
重点盯住「高频重绘 + 尺寸可控」的局部区域，而不是整个页面结构。
- ✅ 推荐加：
.modal-body、.dropdown-menu、固定高度的.card、日期选择器网格.datepicker-days - ❌ 绝对避开：
body、#app、.navbar、Flex 容器根节点——它们尺寸不可控，加了等于没加，还可能破坏对齐或导致定位偏移 - ⚠️ JS 动态插入前必须手动设：
el.style.contain = 'layout paint';，否则插入过程本身就会触发父级重排；收起动画后记得清空：el.style.contain = ''，否则高度可能被锁死
验证是否真正生效，别只看 CSS 声明写了没
运行时检测支持是第一步：if ('contain' in document.documentElement.style)；Safari 和 iOS 微信 X5 内核对 size 支持不全，strict 在某些动效节点上甚至引发定位偏移。
- 真实验证靠行为：打开 Chrome DevTools → Rendering → 勾选
Layout Shift Regions和Paint Flashing，滚动/交互时观察高亮区域是否被限制在目标容器内 - 用
getBoundingClientRect().height检查高度是否稳定，跳变说明contain: content或漏设size导致反复重算 - 生产环境务必做 fallback：当
contain不支持时，至少保留overflow: hidden或降级为will-change: transform
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
