直接加 contain: layout paint 并配固定尺寸是唯一真正生效的起点，因浏览器要求容器具备可预测尺寸上下文，否则静默忽略；显式 height/width 最稳妥，响应式优先用 min-height 或 aspect-ratio+width: 100%。
直接加 contain: layout paint 并配固定尺寸，是唯一能真正生效的起点；不设尺寸，浏览器静默忽略，写了也白写。
为什么 contain: layout paint 必须配固定尺寸？
浏览器对 contain: layout 或 contain: strict 的容器有硬性要求：必须具备可预测的尺寸上下文，否则直接跳过隔离逻辑。这不是警告，是执行前提。
- 显式写
height和width最稳妥，比如卡片区域：height: 120px - 响应式场景优先用
min-height或aspect-ratio+width: 100%，避免min-content、fit-content这类依赖内容的值 - Flex/Grid 容器里的子项加
contain，若父容器没设确定尺寸（如flex: 1且无min-width），同样失效 - 绝对定位的父容器上慎用
contain: layout，可能干扰position: absolute子元素的 containing block
Bootstrap 场景下该加在哪几类元素上？
不是所有组件都适合加 contain，重点盯住“高频重绘+尺寸可控”的区域。
-
.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 动态插入和兼容性
Bootstrap 很多交互靠 JS 插入 DOM，这时 contain 的时机和兼容性比写法更重要。
- 插入大量子节点前，先设
el.style.contain = 'layout paint'；否则插入过程会触发父级重排 - 插入后若需动画展开（如
v-if切换或show类控制），收起时记得清空：el.style.contain = ''，否则尺寸可能锁死 - 生产环境务必检测支持：
if ('contain' in document.documentElement.style)；Safari 对size实现有偏差，iOS 微信 X5 内核基本不支持strict - 别信
getComputedStyle(el).contain返回值——声明写了、控制台查得到，不代表浏览器真执行了隔离；验证要用chrome://tracing看 “Paint” 时间块是否收敛
最麻烦的不是怎么写，而是判断哪些区域真能稳住尺寸；一旦尺寸浮动，contain 就成了装饰性 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
