CSS之Containment模块学习

引言

1. css是如何控制元素样式的？布局 layout，尺寸 size，paint 为何需要引入 contain属性？
2. contain属性有哪些取值？取值不同是如何影响元素表示的？ containment，principal box，containing box 这些概念到底是什么？
3. 如何更好的理解容器这个概念？

摘要

contain属性，该属性标识元素的子树独立于页面的其余部分。如果使用得当，用户代理可以进行大量的优化。

CSS是一种描述在屏幕上现结构化文档(如HTML和XML)的语言

css是什么？用来干什么的？

contain 属性 将元素的子树也就是节点独立于页面，不受其他部分影响，div？

containment 在中文中如何进行翻译？更像一种约束，也可以翻译成容器？翻译成容器好像更好一点

引言

有效地渲染网站取决于用户代理能够检测页面的哪些部分正在显示，哪些部分可能会影响当前显示的部分以及哪些内容可以忽略。

有多种启发式方法可以用来猜测给定子树何时以某种方式独立于页面的其余部分，但是它们很脆弱，因此对页面进行无害的更改可能会无意中使它无法通过此类启发式测试，从而导致 渲染陷入缓慢的代码路径。 还有很多东西很容易隔离，很难或不可能以启发式的方式进行检测。

为了减轻这些问题并允许子树与页面的其余部分牢固，可预测地隔离，此规范定义了一个contain属性

为什么定义contain 属性？隔离页面其他部分

strong containment：contain 属性

strong containment

Name:	contain
Value:	none | strict | content | [ size || layout || paint ]
Initial:	none
Applies to:	See below
Inherited:	no
Percentages:	n/a
Computed value:	specified keyword(s)
Canonical order:	per grammar
Animation type:	not animatable

contain属性值介绍

size

该值将打开元素的大小限制。 这确保了可以对容纳箱进行布局，而无需检查其后代。

layout

此值将打开元素的布局限制。 这样可以确保容纳盒对于布局而言是完全不透明的； 外部没有任何东西可以影响其内部布局，反之亦然。

paint

此值将打开该元素的paint限制。 这样可以确保包含框的后代不会显示在其边界之外，因此，如果元素不在屏幕上或以其他方式不可见，则还可以保证其后代不可见

none

此值指示属性无效。元素正常呈现，不应用任何包含效果。

content

此值将打开除元素的大小容器外的所有形式的容器。换句话说，它的行为与contains: layout paint;相同。

注意::