contain:paint和overflow:hidden的区别
总对比：contain: paint vs overflow: hidden
| 属性 | 本质作用 | 主要目的 | 是否剪裁子元素 | 是否限制重绘区域 | 典型用途 |
|---|---|---|---|---|---|
contain: paint | 渲染隔离（优化性能） | 告诉浏览器：该元素绘制时是独立的 | ❌ 否 | ✅ 是（限制影响范围） | 性能优化、动画、滤镜 |
overflow: hidden | 布局剪裁 | 裁剪超出元素 box 的内容 | ✅ 是 | ❌ 否（不影响重绘范围） | 滚动容器、裁剪内容、布局控制 |
详细解释
1. contain: paint
-
目的：优化性能。告诉浏览器这个元素的视觉效果不会影响外部，可以“隔离绘制”。
-
不会裁剪超出内容，子元素超出仍然会显示（但可能不会影响外部渲染）。
-
适合配合滤镜（filter）、变换（transform）、动画等，避免“脏区域”扩大。
-
示例：
.card {contain: paint;filter: blur(2px);
}-
用途：
-
提升动画或视觉效果时的渲染性能
-
避免 filter/box-shadow 渲染影响父元素
-
强制让浏览器将元素视为“单独层”
-
2. overflow: hidden
-
目的：裁剪超出元素 box 的子内容。
-
不会告诉浏览器做隔离优化，也不一定提升性能。
-
常用于布局控制、创建滚动区域、裁剪图片、卡片圆角隐藏内容等。
-
示例：
.container {overflow: hidden;border-radius: 10px;
}-
用途：
-
裁剪超出范围的内容或子元素
-
配合圆角隐藏内容（如图片）
-
防止滚动条溢出、创建轮播容器等
-
实例对比：
<div class="box"><div class="child">内容内容内容</div>
</div>contain: paint 示例：
.box {contain: paint;box-shadow: 0 0 10px red;
}-
box-shadow 仍然可见
-
不会裁剪 .child
-
浏览器会认为 .box 绘制是独立区域，优化性能
overflow: hidden 示例：
.box {overflow: hidden;box-shadow: 0 0 10px red;
}-
box-shadow 仍然显示（它是 .box 自身的效果，不是子元素溢出）
-
.child 如果超出 .box，会被裁剪
-
浏览器不会优化性能，只是裁剪
总结建议：
| 场景 | 推荐属性 |
|---|---|
| 提升动画性能 / 使用滤镜或 transform | contain: paint |
| 裁剪超出内容、隐藏滚动区域 | overflow: hidden |
| 两者结合使用（如裁剪 + 性能） | 可以一起用，但目的不同 |