跳到主要内容

contain

2023年02月27日
柏拉文
越努力，越幸运

一、认识​

CSS contain 属性允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分。这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能。这个属性在包含大量独立组件的页面非常实用，它可以防止某个小部件的 CSS 规则改变对页面上的其他东西造成影响。

二、语法​

/* 关键词值 */
contain: none;

/* 等价于 contain: layout paint size */
contain: strict;

/* 等价于 contain: layout paint W3C 链接：https://www.w3.org/TR/css-contain-2/#valdef-contain-content*/
contain: content;

contain: size;
contain: layout;
contain: style;
contain: paint;

/* 支持指定多个关键词 */
contain: size paint;
contain: size layout paint;

/* 全局值 */
contain: inherit;
contain: initial;
contain: unset;

可选值:

  • none: 表示元素将正常渲染，没有包含规则。

  • strict: 表示除了 style 外的所有的包含规则应用于这个元素。等价于 contain: size layout paint。

  • content: 表示这个元素上有除了 size 和 style 外的所有包含规则。等价于 contain: layout paint。

  • size: 表示这个元素的尺寸计算不依赖于它的子孙元素的尺寸

  • layout: 表示元素外部无法影响元素内部的布局，反之亦然。

  • style: 表示那些同时会影响这个元素和其子孙元素的属性，都在这个元素的包含范围内。

  • paint: 表示这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见，则同样保证它的子孙节点不会被显示。