在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

contain CSS property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page, leading to obvious performance benefits.

This property is useful on pages that contain a lot of widgets that are all independent, as it can be used to prevent each widget's internals from having side effects outside of the widget's bounding-box.

注意： If applied (with value: paint , strict or content ), this property creates:

1. A new 包含块 (for the descendants whose position 特性为 absolute or fixed ).
2. A new stacking context .
3. A new block formatting context .

句法

/* Keyword values */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: layout;
contain: style;
contain: paint;
/* Multiple keywords */
contain: size paint;
contain: size layout paint;
/* Global values */
contain: inherit;
contain: initial;
contain: unset;
					

contain property is specified as either one of the following:

• Using a single none , strict ，或 content 关键词。
• Using one or more of the size , layout , style ，和 paint keywords in any order.

值

none

Indicates the element renders as normal, with no containment applied.

strict

Indicates that all containment rules except style are applied to the element. This is equivalent to contain: size layout paint .

content

Indicates that all containment rules except size and style are applied to the element. This is equivalent to contain: layout paint .

size

Indicates that the element can be sized without the need to examine its descendants' sizes.

layout

Indicates that nothing outside the element may affect its internal layout and vice versa.

style

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.

paint

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.

形式定义

初始值	none
适用于	所有元素
继承	no
计算值	如指定
动画类型	discrete

形式句法

none | strict | content | [ size || layout || style || paint ]
					

范例

Simple layout

The markup below consists of a number of articles, each with content:

<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>
					

每个 <article> and <img> is given a border, and the images are floated:

img {
  float: left;
  border: 3px solid black;
}
article {
  border: 1px solid black;
}
					

Float interference

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:

<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>
					

img {
  float: left;
  border: 3px solid black;
}
article {
  border: 1px solid black;
}
					

As you can see, because of the way floats work, the first image ends up inside the area of the second article:

Fixing with contain

If we give each 文章 the contain property with a value of content , when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything outside it:

<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>
					

img {
  float: left;
  border: 3px solid black;
}
article {
  border: 1px solid black;
  contain: content;
}
					

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:

规范

规范	状态	注释
CSS Containment Module Level 2 The definition of 'contain' in that specification.	工作草案	添加 style keyword

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
contain	Chrome 完整支持 52	Edge 完整支持 79	Firefox 完整支持 69 注意事项 完整支持 69 注意事项 注意事项 Firefox does not support the style 值。 完整支持 41 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 40	Safari 不支持 No	WebView Android 完整支持 52	Chrome Android 完整支持 52	Firefox Android 完整支持 41 注意事项 Disabled 完整支持 41 注意事项 Disabled 注意事项 Firefox does not support the style 值。 Disabled ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 41	Safari iOS 不支持 No	Samsung Internet Android 完整支持 6.0

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• CSS containment
• CSS position property

元数据

• 最后修改： Oct 5, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Containment
4. 特性

   1. contain