MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

摘要

contain 属性允许开发者声明当前元素和它的内容尽可能的独立于其他部分的 Dom 树。这会让浏览器在重新计算布局、样式、绘图或它们的组合的时候,仅仅在有限的 Dom 区域中,并不是整个页面。这个属性常用在包含大量独立的 widgets 小部件的页面,这个 contain 属性可以防止某个小部件的 CSS 规则改变页面上的其他东西。

初始值none
适用元素all elements
是否是继承属性false
适用媒体all
计算值as specified
Animation typediscrete
正规顺序per grammar

语法

/* No layout containment. 无布局包含*/
contain: none;

/* Turn on containment for layout, style, paint, and size. 打开包含*/
contain: strict;

/* Turn on containment for layout, style, and paint. */
contain: content;

/* Turn on size containment for an element. */
contain: size;

/* Turn on layout containment for an element. */
contain: layout;

/* Turn on style containment for an element. */
contain: style;

/* Turn on paint containment for an element. */
contain: paint;

属性值

none
声明元素正常渲染,没有包含的应用。
strict
声明所有的包含规则应用于这个元素。这样写等价于 contain: size layout style paint。
content
声明这个元素上除了 size 的所有包含规则。等价于 contain: layout style paint。
size
声明这个元素可以被变换尺寸,不需要去检查它依赖尺寸变化。
layout
声明没有外部元素可以影响它内部的布局,反之亦然。
style
声明那些同时会影响这个元素和其子孙元素的属性,不会超出这个元素的包含范围。
paint
声明这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或其他原因不可见,则同样保证它的子孙节点不会被显示。

常规语法

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

Specifications

Specification Status Comment
CSS Containment Module Level 1 Working Draft Initial definition

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 52.0 未实现[1] ? 40 ?
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 52.0 未实现[1] ? ? 40 ? 52.0

[1] This feature is not implemented yet. See bug 1150081.

文档标签和贡献者

 此页面的贡献者: Gaohaoyang
 最后编辑者: Gaohaoyang,