Css Contain属性
参考地址
The 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.
contain 这个css属性允许程序猿声明一个元素和它包含的内容，尽可能地相对于其它文档树独立。这个属性允许浏览器可以在一个小区域而还是整个页面内重新计算一个lahout, style,paint,size 或者一些它们的组件,有减小监听的性能优化的好处；
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.
当一个页面有很多独立的元素时，这个属性是非常有用的，因为它可以阻止元素内部受外部的影响；
Syntax
/* 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;
-
none 声明这个元素像正常那样渲染，就像没有使用过contain属性 Indicates the element renders as normal, with no containment applied.
-
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.
-
content 声明元素期望拥有layout paint 两个属性的规则，等同于 contain: lahout paint; Indicates that all containment rules except size and style are applied to the element. This is equivalent to contain: layout paint.
-
strict 声明元素期望拥有size layout paint 这三个属性的规则。 Indicates that all containment rules except style are applied to the element. This is equivalent to contain: size layout paint. 等同于contain: size layout paint;
