CSS之Containment模块学习
文章目录
- 引言
- 摘要
- 引言
- strong containment：contain 属性
- contain属性值介绍
- 容器类型
- 尺寸容器size containment
- 布局容器 layout containment
- 引入概念
- layout容器失效情况
- 布局容器效果
- paint容器 paint containment
- paint容器影响
- 由此可以进行的优化
引言
- css是如何控制元素样式的？布局 layout，尺寸 size，paint 为何需要引入 contain属性？
- contain属性有哪些取值？取值不同是如何影响元素表示的？ containment，principal box，containing box 这些概念到底是什么？
- 如何更好的理解容器这个概念？
摘要
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;相同。
注意::contain: content ”，适用范围广;在实践中，它的影响相当小，而且大多数内容不会违反它的限制。但是，因为它没有应用大小容器，所以元素仍然可以响应其内容的大小，这可能会导致布图失效，从而比预期的要向树的更上层渗透。使用包含:尽可能严格，以获得尽可能多的包容
strict
此值将打开元素的所有形式的容器。换句话说，它的行为与contains: size layout paint相同
contain属性通常适用于所有元素（包括CSS伪元素4§4.1生成的内容伪元素：:: before和:: after），尽管某些类型的包含对某些元素没有影响，如§3的类型中所述。 遏制。 另外，对于[SVG2]，contain属性仅适用于具有关联CSS布局框的svg元素
思考：contain属性的基本值有三种，其余则是这三种的组合，分别对元素进行大小，布局，paint的约束。
paint containment可以确保 containing box 的后代不会显示在其边界之外，这很重要，也就是其子节点不会溢出父节点容器。没有应用 size 约束，所以元素仍然可以响应其内容的大小，这可能会导致布图失效，从而比预期的要向树的更上层渗透。
容器类型
元素可以遵循几种不同的容器，从而以各种方式限制其后代对页面其余部分的影响。包含允许用户代理进行更强大的优化，并帮助作者用功能单元组成页面，因为它限制了给定更改对文档的影响范围
尺寸容器size containment
引入了 principal box的概念
principal box
display: contents，display: none的情况，或者它的内部显示类型是table，或者它的主体框是一个内部表框，或者内部ruby框，或者一个非原子的内联级框，大小容器没有影响。
思考：content和none 都没有size属性
内部表框（不包括表标题）被排除在外，因为表布局算法不允许框变得小于其流入内容。 调整表单元格的大小使其好像是空的，然后在不更改大小的情况下将其内容布置在内部实际上是未定义的操作。 手动将width或height属性设置为0不能使其小于其内容。 此问题不适用于表格标题，它们完全能够具有与内容无关的固定大小
-
在计算容纳盒（containing box,）的尺寸时，必须将其视为没有内容。然后，必须将其内容布置到容纳箱的已解析大小中。注意：大小限制不会抑制基线对齐
注意:即使元素的大小调整属性是自动的，也不一定使元素的大小为零:然后，必须将其内容布置到容纳箱的已解析大小中元素本身设置的属性(如columns属性或grid属性)将继续被考虑在内。
思考：也就是元素大小不仅受size 控制，还会受到columns grid属性等的影响
-
用于容纳尺寸的容纳箱是整体式的
就其本身而言，尺寸限制不会提供太多的优化机会。 它本身的主要好处是，可以根据容纳箱的大小来布局容纳箱内容的工具（例如实现“容器查询”概念的JS库）可以这样做，而不必担心“无限循环”，其中 让孩子的尺寸响应容纳盒的尺寸也会导致容纳盒的尺寸发生变化，从而可能触发孩子改变自身尺寸的方式的进一步变化，从而可能无限地改变容纳盒的尺寸
思考：也就是容器内部子元素不会影响父元素的变化，导致页面无限破坏，paint 容器是保证后代不会在其边界之外出现，也就是如果不设置size 可能容器会变大 挤压其他容器
布局容器 layout containment
引入概念
containing box包含框- fragmentation container碎片容器
- fragmentation context碎片上下文
- fragmented flow碎片流
layout容器失效情况
- element 没创建主体框，
- display为 none和 content，或者主体框是内部表格
- non-atomic inline-level box
布局容器效果
给一个元素布局容器使它的主体框（principal box）成为布局容器（layout containment）的一个包含框（containing box），并具有以下效果
- 包含框建立一个独立的格式化上下文。
- 如果溢出属性的计算值是可见的或剪辑或其组合，则任何溢出都必须视为墨水溢出。
- 包含框充当绝对定位和固定定位子代的包含块。
- 包含框充当绝对定位和固定定位子代的包含块。
- 包含框将创建一个堆栈上下文。
- 允许在包含框的布局框内强制中断，但不得传播到父级，如CSS Fragmentation 3§3.1框之间的中断所述：before-before和break-after属性
- 出于vertical-align属性的目的，或者需要其效果需要将包含框的基线的位置与其后代相关联的任何其他属性，该包含框被视为没有基线。
- 如果至少一个碎片上下文的碎片容器具有布局容纳，或者至少一个碎片上下文的碎片容器是包含布局容纳框的子孙，并且同一碎片上下文的至少一个后续碎片容器不是子孙 对于具有布局限制的相同元素，则用于布局限制的第一个包含框（其本身是碎片容器或碎片容器的祖先）必须“捕获”剩余的碎片流：碎片不能继续超过布局限制 边界，并且将第一个布局包含边界内的最后一个碎片容器视为其碎片上下文中的最后一个碎片容器。如果仅在碎片流中剩余更多内容时才生成碎片上下文中的后续碎片容器，则不会生成它们。 如果它们不管存在，它们仍然是碎片上下文的一部分，但是不会从碎片流中接收任何内容。
思考：layout containment，制定元素的principal box成为containing box
与关于碎片 fragmention 暂不深究
example
<article>Lorem ipsum…article>
<div id=a>div>
<aside>
<div id=b>div>
<div id=c>div>
aside>
<aside>
<div id=d>div>
<div id=e>div>
aside>
<div id=f>div>
article {flow-into: foo;}
#a, #b, #c, #d, #e, #f {flow-from: foo;}
aside {contain: layout}
在此[CSS-REGIONS-1]示例中，内容可以从#a流向#b，从#b流向#c。 但是，由于#c是第一个包含布局的容纳盒中的最后一个片段容器，因此它会捕获所有剩余的内容，并且没有任何内容流入＃d，＃e或#f。
思考：其给了aside 标签一个 contain：layout属性，在没有布局的情况下可以自由流动，
但是什么情况下内容会发生流动呢？
可以通过布局容器启用的可能的优化包括（但不限于）
- 在布局页面时，可以并行地放置独立的包含框的内容，因为可以保证它们不会相互影响。
- 在对页面进行布局时，如果包含框不在屏幕上或被遮挡，并且屏幕可见部分的布局不取决于包含框的大小（例如，如果包含框位于页面末尾附近） 块容器，并且您正在查看块容器的开头），则可以延迟或以较低的优先级来完成包含框内容的布局。
思考：div 肯定是有 contain：layout属性的，通常使用其来进行布局
paint容器 paint containment
不生效情况和前面两种是一样的，
paint容器影响
- 元素的内容（包括后代的绘制及其几何形状）必须修剪到包含框的填充边缘，同时考虑到边角修剪。 这不包括创建任何机制来访问或指示剪辑内容的存在； 它也不会通过其他属性（例如溢出overflow，调整大小resize或文本溢出text-overflow）来阻止任何此类机制的创建。 这就像溢出：可见更改为溢出：裁剪使用的值。This is as if overflow: visible was changed to overflow: clip at used value.
- 包含框充当绝对定位和固定定位子代的包含块。
- 包含框创建一个堆叠上下文。
- 包含框建立一个独立的格式化上下文。
由此可以进行的优化
- 如果包含框不在屏幕上或被遮盖，则UA可以直接跳过尝试对其内容进行绘制的操作，因为它们也被保证在屏幕外/被遮盖
- 除非可以通过单独的机制（例如溢出，调整大小或文本溢出属性）访问剪切的内容，否则UA可以为盒子保留与盒子大小完全相同的“画布”空间。 （在类似的，可滚动的情况下，例如溢出：隐藏，可以滚动到当前已剪切的内容，因此UA通常会预测性地进行粉刷，以便在滚动发生时立即看到一些东西，而不是一帧以后看到。
- 因为它们被保证是堆叠上下文，滚动元素可以被绘制到一个单独的GPU层
思考，paint 容器，显示页面看到的内容，涉及溢出等等知识，暂不深究
全文总结
引入了contain属性，containment容器，布局容器，尺寸容器，paint容器等概念，更好的理解了css布局
官方参考文档