contain: layout paint; 需作用于有明确尺寸（如min-height或height）的块级容器才生效，否则浏览器会静默忽略；取值应按需选择：layout隔离布局影响，paint跳过绘制，size需配合显式宽高，style极少单独使用。
contain 属性在 CSS 中怎么写才生效
直接写 contain: layout paint; 就能触发浏览器的渲染隔离，但必须作用在有明确尺寸（width/height 或 min-height）的块级容器上。没有尺寸限制的 div 即使加了 contain，Chrome 也会静默忽略——这不是 bug，是规范要求：浏览器无法对“无限高”的区域做布局边界判定。
常见错误写法：
/* ❌ 不生效：父容器高度由内容撑开，无明确边界 */
.container {
contain: layout paint;
}
/* ✅ 生效：显式约束高度或最小高度 */
.container {
contain: layout paint;
min-height: 200px; /* 或 height: 300px; */
}
layout / paint / style / size 这几个值到底该选哪个
contain 的取值不是越多越好。选错组合反而会破坏渲染逻辑或引发意外重绘。
-
layout：告诉浏览器“这个元素内部的布局变化不会影响外部”，适合固定尺寸卡片、列表项。但若子元素用了position: absolute且 top/left 超出父容器，可能被裁剪（因为 layout 隔离了包含块计算） -
paint：最常用，确保元素不可见时完全跳过绘制，滚动中隐藏区域不触发光栅化。适合长列表中的每个.item -
size：危险操作。必须配合显式width和height，否则浏览器无法推断尺寸，会直接禁用 contain。仅适用于图标、头像等尺寸绝对固定的内联组件 -
style：极少单独使用，需搭配contain-intrinsic-size，主要为content-visibility: auto底层服务，普通业务代码几乎不用
contain 和 content-visibility 哪个更适合列表优化
两者目标相似，但行为层级不同：content-visibility: auto 是“是否渲染子树”，contain: paint layout 是“如何隔离已渲染的子树”。实际项目中建议分层使用：
- 对整页长列表（如 1000+ 条），优先用
content-visibility: auto+contain-intrinsic-size，让浏览器直接跳过不可见区域的样式计算和布局 - 对单个卡片（如商品卡），再叠加
contain: layout paint，防止其内部动画/状态切换影响周围元素重排 - 不要给
content-visibility: auto的容器再设contain: size，二者冲突会导致contain-intrinsic-size失效
典型结构：
.list {
content-visibility: auto;
contain-intrinsic-size: 200px;
}
.list > .card {
contain: layout paint;
}
contain 在 Safari 和旧版 Chrome 中的表现差异
contain 在 Safari 15.4+ 才完整支持 layout 和 paint；Safari 15.0–15.3 只支持 strict（等价于 layout paint style size），但会强制要求 size，导致未设宽高的元素失效。Chrome 85+ 支持良好，但低于 90 的版本对 contain: style 有兼容问题。
稳妥做法：
- 用
@supports (contain: layout)做特性检测，降级为will-change: transform或简单 visibility 控制 - 避免在 iOS 15.3 及以下设备上依赖
contain: layout做关键布局隔离 - CI 构建时可用
postcss-contain自动补全前缀（虽然现代浏览器已无需前缀，但工具链仍可能报 warning）
真正容易被忽略的是：contain 的性能收益高度依赖元素尺寸稳定性。一个频繁改变 height 的容器，即使加了 contain: layout paint，每次 resize 仍会触发完整布局重排——这时候不如用 transform: scaleY() 模拟展开收缩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
