1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
|
---
title: contain
slug: Web/CSS/contain
tags:
- CSS
- CSS Containment
- CSS 属性
- Style
- Web
- 参考
- 布局
- 样式
- 渲染
translation_of: Web/CSS/contain
---
<div>{{CSSRef}}</div>
<p><a href="/zh-CN/docs/Web/CSS">CSS</a><strong> <code>contain</code></strong> 属性允许开发者声明当前元素和它的内容尽可能的<em>独立</em>于 DOM 树的其他部分。这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能。</p>
<p>这个属性在包含大量独立组件的页面非常实用，它可以防止某个小部件的 CSS 规则改变对页面上的其他东西造成影响。</p>
<div class="blockIndicator note">
<p><strong>Note:</strong> If applied (with value: <code>paint</code>, <code>strict</code> or <code>content</code>), this property creates:</p>
<ol>
<li>A new <a href="/zh-CN/docs/Web/CSS/Containing_block">containing block</a> (for the descendants whose {{cssxref("position")}} property is <code>absolute</code> or <code>fixed</code>).</li>
<li>A new <a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>.</li>
<li>A new <a href="/zh-CN/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a>.</li>
</ol>
</div>
<h2 id="语法">语法</h2>
<pre class="brush: css notranslate">/* 关键词值 */
contain: none;
/* 等价于 contain: layout style paint size */
contain: strict;
/* 等价于 contain: layout style paint */
contain: content;
contain: size;
contain: layout;
contain: style;
contain: paint;
/* 支持指定多个关键词 */
contain: size paint;
contain: size layout paint;
/* 全局值 */
contain: inherit;
contain: initial;
contain: unset;</pre>
<p>The <code>contain</code> property is specified as either one of the following:</p>
<ul>
<li>Using a single <code>none</code>, <code>strict</code>, or <code>content</code> keyword.</li>
<li>Using one or more of the <code>size</code>, <code>layout</code>, <code>style</code>, and <code>paint</code> keywords in any order.</li>
</ul>
<h3 id="属性值">属性值</h3>
<dl>
<dt><code>none</code></dt>
<dd>表示元素将正常渲染，没有包含规则。</dd>
<dt><code>strict</code></dt>
<dd>表示除了 <code>style</code> 外的所有的包含规则应用于这个元素。等价于 <code>contain: size layout paint</code>。</dd>
<dt><code>content</code></dt>
<dd>表示这个元素上有除了 <code>size</code> 和 <code>style</code> 外的所有包含规则。等价于 <code>contain: layout paint</code>。</dd>
<dt><code>size</code></dt>
<dd>表示这个元素的尺寸计算不依赖于它的子孙元素的尺寸。</dd>
<dt><code>layout</code></dt>
<dd>表示元素外部无法影响元素内部的布局，反之亦然。</dd>
<dt><code>style</code></dt>
<dd>表示那些同时会影响这个元素和其子孙元素的属性，都在这个元素的包含范围内。<br>
Indicates that, for properties that can have effects on more than just an element and its descendants, those effects don't escape the containing element. Note that this value is marked "at-risk" in the spec and may not be supported everywhere.</dd>
<dt><code>paint</code></dt>
<dd>表示这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见，则同样保证它的子孙节点不会被显示。<br>
Indicates that descendants of the element don't display outside its bounds. If the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box. And if a descendant overflows the containing element's bounds, then that descendant will be clipped to the containing element's border-box.</dd>
</dl>
<h2 id="正式定义">正式定义</h2>
<p>{{cssinfo}}</p>
<h2 id="形式化语法">形式化语法</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="示例">示例</h2>
<h3 id="简单布局">简单布局</h3>
<p>The markup below consists of a number of articles, each with content:</p>
<pre class="brush: html notranslate"><h1>My blog</h1>
<article>
<h2>Heading of a nice article</h2>
<p>Content here.</p>
</article>
<article>
<h2>Another heading of another article</h2>
<img src="graphic.jpg" alt="photo">
<p>More content here.</p>
</article></pre>
<p>Each <code><article></code> and <code><img></code> is given a border, and the images are floated:</p>
<pre class="brush: css notranslate">img {
float: left;
border: 3px solid black;
}
article {
border: 1px solid black;
}</pre>
<p>{{EmbedLiveSample('Simple_layout', '100%', '300')}}</p>
<h3 id="浮动干涉">浮动干涉</h3>
<p>If we were to insert another image at the bottom of the first article, a large portion of the DOM tree may be re-laid out or repainted, and this would also interfere with the layout of the second article:</p>
<pre class="brush: html notranslate"><h1>My blog</h1>
<article>
<h2>Heading of a nice article</h2>
<p>Content here.</p>
<img src="i-just-showed-up.jpg" alt="social">
</article>
<article>
<h2>Another heading of another article</h2>
<img src="graphic.jpg" alt="photo">
<p>More content here.</p>
</article></pre>
<div class="hidden">
<pre class="brush: css notranslate">img {
float: left;
border: 3px solid black;
}
article {
border: 1px solid black;
}</pre>
</div>
<p>As you can see, because of the way floats work, the first image ends up inside the area of the second article:</p>
<p>{{EmbedLiveSample('Float_interference', '100%', '300')}}</p>
<h3 id="Fixing_with_contain">Fixing with contain</h3>
<p>If we give each <code>article</code> the <code>contain</code> property with a value of <code>content</code>, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything outside it:</p>
<div class="hidden">
<pre class="brush: html notranslate"><h1>My blog</h1>
<article>
<h2>Heading of a nice article</h2>
<p>Content here.</p>
<img src="i-just-showed-up.jpg" alt="social">
</article>
<article>
<h2>Another heading of another article</h2>
<img src="graphic.jpg" alt="photo">
<p>More content here.</p>
</article></pre>
</div>
<pre class="brush: css notranslate">img {
float: left;
border: 3px solid black;
}
article {
border: 1px solid black;
contain: content;
}</pre>
<p>This also means that the first image no longer floats down to the second article, and instead stays inside it's containing element's bounds:</p>
<p>{{EmbedLiveSample('Fixing_with_contain', '100%', '330')}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Containment 2', '#contain-property', 'contain')}}</td>
<td>{{Spec2('CSS Containment')}}</td>
<td>Added <code>style</code> keyword</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.contain")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Containment">CSS containment</a></li>
<li>CSS {{cssxref("position")}} 属性</li>
</ul>
|
