CSS contain 属性详解

一、contain 概述

CSScontain属性用于隔离元素的样式计算、布局和绘制，提高渲染性能。它告诉浏览器该元素的变化不会影响其他元素。

1.1 基本语法

.element { contain: none; /* 默认值 */ contain: strict; /* 所有隔离 */ contain: content; /* 内容隔离 */ contain: layout; /* 布局隔离 */ contain: style; /* 样式隔离 */ contain: paint; /* 绘制隔离 */ }

二、隔离类型

2.1 layout

.element { contain: layout; }

隔离布局：元素内部的布局变化不会影响外部。

2.2 paint

.element { contain: paint; }

隔离绘制：元素不会绘制到其边界之外。

2.3 style

.element { contain: style; }

隔离样式：计数器和引号不会影响外部。

2.4 content

.element { contain: content; }

等同于layout paint。

2.5 strict

.element { contain: strict; }

等同于layout paint style。

三、实战案例

3.1 列表项隔离

.list-item { contain: layout paint; transition: transform 0.3s ease; } .list-item:hover { transform: translateX(10px); }

3.2 动画容器

.animated-container { contain: strict; will-change: transform; }

3.3 滚动容器

.scroll-container { contain: layout paint; overflow: auto; }

四、性能优化

4.1 减少重绘范围

.card { contain: layout paint; }

4.2 配合 will-change

.element { contain: strict; will-change: transform, opacity; }

五、浏览器兼容性

六、总结

contain 是性能优化的重要属性：

1. layout- 隔离布局
2. paint- 隔离绘制
3. style- 隔离样式
4. content- 内容隔离
5. strict- 完全隔离

合理使用可以显著提高渲染性能。