contain
contain 属性允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分。这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能。
这个属性在包含大量独立组件的页面非常实用，它可以防止某个小部件的 CSS 规则改变对页面上的其他东西造成影响。
语法
/* 关键词值 */
contain: none;
/* 等价于 contain: layout style 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 //表示这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见，则同样保证它的子孙节点不会被显示。
我们来挑选几个分析下：
contain: size
contain: size: 设定了 contain: size 的元素的渲染不会受到其子元素内容的影响。
假设我们有如下简单结构：
<div class="container">
</div>.container {
width: 300px;
padding: 10px;
border: 1px solid red;
}
p {
border: 1px solid #333;
margin: 5px;
font-size: 14px;
}并且，借助 jQuery 实现每次点击容器添加一个 <p>Coco</p> 结构：
$('.container').on('click', e => {
$('.container').append('<p>Coco</p>')
})那么会得到如下结果：
可以看到，容器 .container 的高度是会随着元素的增加而增加的，这是正常的现象。
此刻，我们给容器 .container 添加一个 contain: size，也就会出现上述说的：设定了 contain: size 的元素的渲染不会受到其子元素内容的影响。
.container {
width: 300px;
padding: 10px;
border: 1px solid red;
+ contain: size
}再看看会发生什么：
正常而言，父元素的高度会因为子元素的增多而被撑高，而现在，子元素的变化不再影响父元素的样式布局，这就是 contain: size 的作用。
contain: paint
contain: paint：设定了 contain: paint 的元素即是设定了布局限制，也就是说告知 User Agent，此元素的子元素不会在此元素的边界之外被展示，因此，如果元素不在屏幕上或以其他方式设定为不可见，则还可以保证其后代不可见不被渲染。
设定了 contain: paint 的元素的子元素不会在此元素的边界之外被展示
这个特点有点类似与 overflow: hidden，也就是明确告知用户代理，子元素的内容不会超出元素的边界，所以超出部分无需渲染。
简单示例，假设元素结构如下：
<div class="container">
<p>Coco</p>
</div>.container {
contain: paint;
border: 1px solid red;
}
p{
left: -100px;
}我们来看看，设定了 contain: paint 与没设定时会发生什么：
设定了 contain: paint 的元素在屏幕之外时不会渲染绘制
通过使用 contain: paint， 如果元素处于屏幕外，那么用户代理就会忽略渲染这些元素，从而能更快的渲染其它内容。
contain: layout
contain: layout：设定了 contain: layout 的元素即是设定了布局限制，也就是说告知 User Agent，此元素内部的样式变化不会引起元素外部的样式变化，反之亦然。
启用 contain: layout 可以潜在地将每一帧需要渲染的元素数量减少到少数，而不是重新渲染整个文档，从而为浏览器节省了大量不必要的工作，并显着提高了性能。
使用 contain：layout，开发人员可以指定对该元素任何后代的任何更改都不会影响任何外部元素的布局，反之亦然。
因此，浏览器仅计算内部元素的位置（如果对其进行了修改），而其余DOM保持不变。因此，这意味着帧渲染管道中的布局过程将加快。
存在的问题
描述很美好，但是在实际 Demo 测试的过程中（截止至2021/04/27，Chrome 90.0.4430.85），仅仅单独使用 contain：layout 并没有验证得到上述那么美好的结果。
设定了 contain: layout 的指定元素，改元素的任何后代的任何更改还是会影响任何外部元素的布局，点击红框会增加一条 <p>Coco<p> 元素插入到 container 中：
简单的代码如下：
<div class="container">
<p>Coco</p>
...
</div>
<div class="g-test"></div>html,
body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
}
.container {
width: 150px;
padding: 10px;
contain: layout;
border: 1px solid red;
}
.g-test {
width: 150px;
height: 150px;
border: 1px solid green;
}
好了，上面就是contain的几个属性分析，本分转载自：
https://mp.weixin.qq.com/s/56SPp_VyqixJFEkIukjk5A
如有侵权请联系我删除！！！！
