CSS新特性contain的详细介绍

本篇内容主要讲解“CSS新特性contain的详细介绍”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS新特性contain的详细介绍”吧!

专注于为中小企业提供成都网站制作、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业重庆免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

contain 为何?

contain 属性允许我们指定特定的 DOM 元素和它的子元素，让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次都针对整个页面。

The contain 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.

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; }

除去 none，取值还有 6 个，我们一个一个来看看。

contain: size

contain: size: 设定了 contain: size 的元素的渲染不会受到其子元素内容的影响。

The value turns on size containment for the element. This ensures that the containing box can be laid out without needing to examine its descendants.

我开始看到这个定义也是一头雾水，光看定义很难明白到底是什么意思。还需实践一番：

假设我们有如下简单结构：

.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
') })

那么会得到如下结果：

CSS新特性contain的详细介绍

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

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

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

再看看会发生什么：

CSS新特性contain的详细介绍

正常而言，父元素的高度会因为子元素的增多而被撑高，而现在，子元素的变化不再影响父元素的样式布局，这就是 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.

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