contain: layout paint 必须同时使用才能完整隔离渲染，单用layout无法阻止样式变更触发父级重绘，单用paint无法防止尺寸变化导致外部重排；且必须配合显式高度（如min-height）才生效。
contain: layout paint 必须一起写，单用基本没用
只写 contain: layout，子元素改颜色、透明度、文字内容，依然会触发父级样式重算；只写 contain: paint，子元素一撑大（比如图片加载、文字换行），父容器就重排。二者必须共存，才能同时切断“布局影响链”和“绘制扩散链”。contain: content 在 Chrome 120+ 已被废弃，MDN 明确标记为不推荐，行为不可靠，别用。
显式尺寸不是可选项，是硬门槛
浏览器对 contain: layout 或 contain: strict 的容器有尺寸可信度要求：它必须能提前确认边界，否则直接静默忽略——你看到 getComputedStyle(el).contain 返回 "layout paint"，不代表真生效。
-
height: auto、min-height: min-content、width: fit-content都会让浏览器判定“尺寸不可控”，隔离失效 - 稳妥写法：
min-height: 300px; max-height: 800px; overflow-y: auto;—— 下限防塌陷，上限锁死重绘区域高度 - Flex/Grid 容器里的子项加
contain，若父容器没设确定尺寸（如flex: 1且无min-width），同样不生效
哪些地方加了真有用，哪些加了反而坏事
重点盯住“高频重绘 + 尺寸可控”的区域：
-
.modal-body、.dropdown-menu这类弹层容器：加contain: paint可切断滚动时整页重绘，尤其当内部有图标切换或骨架屏动画 -
.card或.list-group-item单项：若高度固定且内容动态（如状态 badge 增删），加contain: layout paint -
.datepicker-days（日期选择器日历网格）：实测加contain: paint后滚动帧率从 28fps 升至 58fps，但需确保无overflow: hidden裁剪依赖 - 绝对避开：
body、#app、.navbar等根级或 Flex 容器——它们尺寸不可控，加了等于没加，还可能破坏对齐
JS 动态插入节点前必须手动设 style.contain
Bootstrap/Vue 等框架大量依赖 JS 插入 DOM，这时时机比写法更重要：
立即学习“前端免费学习笔记（深入）”；
- 插入大量子节点前，先执行
el.style.contain = 'layout paint';，否则插入过程会触发父级重排 - 插入后若需动画展开（如
v-if切换或show类控制），收起时记得清空：el.style.contain = ''，否则size可能锁死高度 - 生产环境务必检测支持：
if ('contain' in document.documentElement.style)；Safari 对size实现有偏差，iOS 微信 X5 内核基本不支持strict
contain 就成了装饰性 CSS。 
