css新特性 - contain

属性介绍

隔离样式、布局和渲染。

开发人员可以使用这个 contain 属性来限制指定的DOM元素和它的子元素同页面上其它内容的联系；我们可以把它看做一个iframe。跟iframe很相似，它能建立起一个边界，产生一个新的根布局；保证了它和它的子元素的DOM变化不会触发父元素重新布局、渲染等。

允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分。这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能。

语法

none | strict | layout | style | paint | size | contain

• none - 无
• layout -  布局限制
  • 开发人员可以指定对该元素任何后代的任何更改都不会影响任何外部元素的布局，反之亦然。因此，浏览器仅计算内部元素的位置（如果对其进行了修改），而其余DOM保持不变。因此，这意味着帧渲染管道中的布局过程将加快
  • 由于元素内部发生了大小等能触发回流的属性样式变化时 layout 属性将不生效。对于设置contain: layout，观感上它与 position：relative 并无区别，都是在正常文档流中占据位置，且子元素浮于正常文档流之上
• style - 样式限制（禁用）
  • 指示对于不仅对元素及其子体有影响的属性，这些影响不会转义包含元素。但因其有风险，所以被禁用
• paint - 渲染限制
  • 设置了 contain: paint 的元素在屏幕之外时不会渲染绘制，子元素超出此元素的边界之外将不再渲染（类似overflow: hidden）
• size - size限制
  • 设置了 contain: size 的元素其大小不会受子元素影响，正常而言，父元素的高度会因为子元素的增多而被撑高，而设置该属性后，子元素的变化不再影响父元素的样式布局。
• content - 除了size外的所有限制
  • 同时开启 layout、style 以及 paint 的功能，它相当于 contain: layout paint
• strict - layout, style 和 paint 三种限制组合
  • 同时开启 layout、style、paint 以及 size 的功能，它相当于 contain: size layout paint

{
  /* No layout containment. */
  contain: none;
  /* 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;

  /* Turn on containment for layout, paint, and size. */
  contain: strict;
  /* Turn on containment for layout, and paint. */
  contain: content;
}