contain 属性允许我们指定特定的 DOM 元素和它的子元素，让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次都针对整个页面。
开发人员可以用这个 contain 属性声明一个元素和它的子元素是——尽可能的——和页面上的其它元素保持独立。
none | strict | layout | style | paint | size | contain
-
none 无
-
layout 开启布局限制
-
style 开启样式限制
-
paint 开启渲染限制
-
size 开启size限制
-
content 开启除了size外的所有限制
-
strict开启 layout, style 和 paint 三种限制组合
contain 使用场景举例
页面小饰件(widgets)
屏幕外的内容
计算容器尺寸
为什么浏览器不能自动的实现 contain 的功能
什么时候应该使用contain
{
/* 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;
}
服务热线 19970861797
