CSS新特性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; }

.container {     width: 300px;     padding: 10px;     border: 1px solid red; }  p {     border: 1px solid #333;     margin: 5px;     font-size: 14px; }

并且，借助 jQuery 实现每次点击容器添加一个

Coco

$('.container').on('click', e => {     $('.container').append('
Coco
') })

那么会得到如下结果：

可以看到，容器 .container 的高度是会随着元素的增加而增加的，这是正常的现象。

此刻，我们给容器 .container 添加一个 contain: size，也就会出现上述说的：设定了 contain: size  的元素的渲染不会受到其子元素内容的影响。

.container {     width: 300px;     padding: 10px;     border: 1px solid red; +   contain: size }

再看看会发生什么：

正常而言，父元素的高度会因为子元素的增多而被撑高，而现在，子元素的变化不再影响父元素的样式布局，这就是 contain: size 的作用。

contain: style

接下来再说说 contain: style、contain: layout 、contain: paint。先看看 contain: style。

截止至本文书写的过程中，contain: style 暂时被移除了。

• CSS Containment Module Level 1[2]: Drop the at-risk “style containment”  feature from this specification, move it Level 2。

嗯，官方说辞是因为存在某些风险，暂时被移除，可能在规范的第二版会重新定义吧，那这个属性也暂且放一放。

contain: paint

contain: paint：设定了 contain: paint 的元素即是设定了布局限制，也就是说告知 User  Agent，此元素的子元素不会在此元素的边界之外被展示，因此，如果元素不在屏幕上或以其他方式设定为不可见，则还可以保证其后代不可见不被渲染。

• This value turns on paint containment for the element. This ensures that the  descendants of the containing box don’t display outside its bounds, so if an  element is off-screen or otherwise not visible, its descendants are also  guaranteed to be not visible.

这个稍微好理解一点，先来看第一个特性：

设定了 contain: paint 的元素的子元素不会在此元素的边界之外被展示

• 设定了 contain: paint 的元素的子元素不会在此元素的边界之外被展示

这个特点有点类似与 overflow: hidden，也就是明确告知用户代理，子元素的内容不会超出元素的边界，所以超出部分无需渲染。

简单示例，假设元素结构如下：

     
Coco