css理论基础

November 5, 2023

包含块（containing block）

包含块指的是在逻辑上包含当前元素的块元素。一些 CSS 属性，盒模型属性例如 width, left, right, padding, margin，height 和偏移属性 top，bottom，left，right ，若声明为百分比值（%），则该值的计算值是根据包含块元素的相关属性计算的。

确定一个元素的包含块

一个元素的包含块完全由这个元素的 position 属性决定，给定一个元素：

若 position 属性的值为 static（默认值）、relative 或 sticky，则包含块为当前元素最近祖先元素的 content-box 区域
若 position 属性的值为 absolute，则包含块为当前元素最近的 position 属性是非 static 值的祖先元素的 padding-box 区域
若 position 属性的值为 fixed，则包含块为：
- 对于 continuous media（往往是屏幕上的网页）则是 viewport
- 对于 paged media（往往是打印机打印的文档）则是 page area
若 position 属性的值为 absolute 或 fixed，则包含块为满足以下条件的最近祖先元素的 padding-box 区域
- transform 或 perspective 的值不是 none
- will-change 的值是 transform 或 perspective
- filter 的值不是 none 或 will-change 的值是 filter（只在 Firefox 下生效）
- contain 的值是 layout, paint, strict 或 content
- backdrop-filter 的值不是 none

百分比是如何计算的

height top bottom 属性根据包含块的 height 计算百分比值
width left right padding margin 属性根据包含块的 width 计算百分比值

注意： padding 和 margin 及它们的完整形式都是根据 width 计算的，包括 padding-top padding-bottom 这些。

常规流（Normal flow）

具体参见 CSS2.1 规范 9.4 节：https://www.w3.org/TR/CSS2/visuren.html#normal-flow。下面只是摘要，有省略。
注意： 这是 CSS2.1 的规范，所以不涉及 CSS3 的新属性或值。

正常流中的盒子属于格式化上下文，可以是块级或内联级，但不能同时是两者。块级盒子参与块级格式化上下文，内联级盒子参与内联级格式化上下文。

块级格式化上下文 BFC

浮动元素、绝对定位元素、非块级盒子的块级容器（如内联块、表格单元格和表格标题）以及 overflow 属性不是 visible （默认值）的块级盒子（除非该值已传播到视口）为其内容建立新的块级格式化上下文。

注：CSS3 的 overflow: clip 不会创建新的块级格式化上下文。
关于 BFC 的细节与使用参见下文 BFC 部分，而不是本节。

在块级格式化上下文中，盒子按垂直方向一个接一个地布局，从包含块的顶部开始。两个兄弟盒子之间的垂直距离由 margin 属性确定。块级格式化上下文中相邻的块级盒子之间的垂直外边距会发生折叠。

在块级格式化上下文中，每个盒子的左外边缘与包含块的左边缘接触（对于从右到左的格式化，右边缘接触）。即使存在浮动元素（尽管由于浮动元素的存在，盒子的行盒可能会收缩），这仍然成立，除非盒子本身建立了一个新的块级格式化上下文（在这种情况下，由于浮动元素的存在，盒子本身可能变窄）。

内联级格式化上下文 IFC

在内联级格式化上下文中，盒子按水平方向一个接一个地布局，从包含块的顶部开始。这些盒子之间会考虑水平外边距、边框和内边距。这些盒子可以以不同的方式在垂直方向上对齐。包含形成一行的盒子的矩形区域称为行盒。

行盒的宽度由包含块和浮动元素的存在确定。行盒的高度由 line-height 计算部分中给出的规则确定。

行盒始终足够高以容纳其包含的所有盒子。但是，它可能比其包含的最高盒子更高（例如，盒子以 baseline 对齐）。当盒子 B 的高度小于包含它的行盒的高度时，B 在行盒中的垂直对齐由 vertical-align 属性确定。当几个内联级盒子无法在单个行盒中水平放置时，它们会分布在两个或多个垂直堆叠的行盒中。因此，段落是一堆垂直堆叠的行盒。行盒堆叠时没有垂直间隔（除非另有规定），并且它们永远不会重叠。

通常情况下，行盒的左边缘与其包含块的左边缘接触，右边缘与其包含块的右边缘接触。然而，浮动盒子可能位于包含块边缘和行盒边缘之间。因此，尽管同一内联级格式化上下文中的行盒通常具有相同的宽度（即包含块的宽度），但如果由于浮动元素而减少了可用的水平空间，它们的宽度可能会有所不同。同一内联级格式化上下文中的行盒通常在高度上有所不同（例如，一行可能包含一个高的图像，而其他行只包含文本）。

当一行上的内联级盒子的总宽度小于包含它们的行盒的宽度时，它们在行盒内的水平分布由 text-align 属性确定。如果该属性的值为 justify，用户代理可拉伸内联盒子中的空格和单词（但不包括内联表格和内联块盒子）。

当内联级盒子的宽度超过行盒的宽度时，它会被分割成多个盒子，并在多个行盒中分布。如果无法分割内联级盒子（例如，如果内联级盒子只包含一个字符，或者语言特定的断词规则不允许在内联级盒子内进行断词，或者内联级盒子受 white-space 属性值为 nowrap 或 pre 的影响），那么内联级盒子将溢出行盒。

当内联级盒子被分割时，边距、边框和内边距在分割发生的地方（或者在多个分割时，当有多个分割时）没有视觉效果。

由于双向文本处理，内联级盒子也可能在同一行盒中分割为多个盒子。

在内联级格式化上下文中，根据需要创建行盒以容纳内联级内容。不包含文本、无保留空格、没有具有非零外边距、内边距或边框的内联元素以及没有其他流动内容（如图像、内联块或内联表格）的行盒，并且不以保留的换行符结尾的行盒，在确定其中任何元素位置时必须被视为零高度行盒，并且在其他任何情况下都被视为不存在。

In flow and out of flow

如果一个盒子被从其预期位置中提取出来，并且在父级格式化上下文中以不同的方式布局，与周围内容的交互也不同于正常内容流程，那么该盒子就是 "out-of-flow"（脱离文档流）的。
这种情况发生在盒子被浮动（通过 float 属性）或绝对定位（通过 position 属性）时。如果一个盒子不是 "out-of-flow" 的，那么它就是 "in-flow"（在文档流中）。

区格式化上下文（Block Formatting Context，BFC）

内联级格式化上下文存在于块级格式化上下文中（是其包含的一部分）。例如，属于 内联级格式化上下文的行盒 与 属于块级格式化上下文的浮动元素 相互作用。

块级布局是在块级格式化上下文内执行的布局，用于处理块级盒子。

块级格式化上下文根（Block Formatting Context Root）是建立新的块级格式化上下文的块级容器。

表现为：

包含内部浮动 :BFC 使得让浮动内容和周围的内容等高。（防止当一个元素包含浮动元素时发生高度坍塌）
排除外部浮动 ：在正常流中建立新的 BFC 的元素不会与位于相同 BFC 中的浮动元素的外边距框重叠。（BFC 中的浮动元素不会覆盖 BFC 中的普通流元素）
阻止外边距重叠 ：不同的 BFC 直接不会发生外边距重叠。（防止外边距重叠）

简单来说：BFC 内部子元素不影响 BFC 外部元素

满足以下条件时，创建 BFC

翻译自 MDN：https://developer.mozilla.org/docs/Web/Guide/CSS/Block_formatting_context

文档的根元素（<html>）
浮动元素（float属性值不为none的元素）
绝对定位元素（position属性值为absolute或fixed的元素）
内联块元素（display属性值为inline-block的元素）
表格单元格（display属性值为table-cell的元素。对于 HTML 表格单元格来说，这是默认值）
表格标题（display属性值为table-caption的元素。对于 HTML 表格标题来说，这是默认值）
由元素隐式创建的匿名表格单元格，这些元素的display属性值为table、table-row、table-row-group、table-header-group、table-footer-group（分别对应 HTML 表格、表格行、表格主体、表格头部和表格底部），或者inline-table
overflow属性值不为visible和clip的块级元素
display属性值为flow-root的元素（display: flow-root）
contain属性值为layout、content或paint的元素
flex或inline-flex的直接子元素，如果它们本身既不是flex容器，也不是grid容器或table容器
grid或inline-grid的直接子元素，如果它们本身既不是flex容器，也不是grid容器或inline-grid容器
多列容器（column-count或column-width属性值不为auto的元素，包括column-count: 1的元素）
column-span属性值为all的元素应始终创建一个新的格式化上下文，即使column-span: all的元素不包含在多列容器中（规范更改，Chrome bug）

clear: left 声明：不允许浮动元素浮动到当前元素的左边，那么当前元素就会被移动到浮动元素的 margin-box 的下面
clear: right clear: both 同理。参见：https://developer.mozilla.org/docs/Web/CSS/clear
float overflow

视觉格式化模型（Visual formatting model）

display 属性定义了元素的显示类型，它包括两个基本特性，决定了元素如何生成盒子。

外部显示类型（outer display type）：决定了主要盒子本身在流式布局中的参与方式。
内部显示类型（inner display type）：如果元素是非替换元素，它定义了元素生成的格式化上下文类型，决定了其后代盒子的布局方式。（替换元素的内部显示类型不在 CSS 的范围之内）

display 属性形式化语法如下：

css

display =
  [ <display-outside> || <display-inside> ]         |
  <display-listitem>                                |
  <display-internal>                                |
  <display-box>                                     |
  <display-legacy>                                  |
  <display-outside> || [ <display-inside> | math ]

<display-outside>  = block | inline | run-in
<display-inside>   = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> = table-row-group | table-header-group |
                     table-footer-group | table-row | table-cell |
                     table-column-group | table-column | table-caption |
                     ruby-base | ruby-text | ruby-base-container |
                     ruby-text-container
<display-box>      = contents | none
<display-legacy>   = inline-block | inline-table | inline-flex | inline-grid

层叠上下文

翻译自 MDN 英文文档

文档的根元素（<html>）
position 属性值为 absolute 或 relative，且 z-index 属性值不为 auto 的元素
position 属性值为 fixed 或 sticky（对于所有移动浏览器都适用，但不适用于旧的桌面浏览器）的元素
container-type 属性值为 size 或 inline-size，用于容器查询的元素
是 flex 容器的子元素，且 z-index 属性值不为 auto
是 grid 容器的子元素，且 z-index 属性值不为 auto
opacity 属性值小于 1 的元素（参见透明度规范）
mix-blend-mode 属性值不为 normal 的元素
具有以下任一属性且属性值不为 none 的元素：
- transform
- filter
- backdrop-filter
- perspective
- clip-path
- mask / mask-image / mask-border
isolation 属性值为 isolate 的元素
will-change 属性值指定任何属性，该属性会在非初始值时创建一个层叠上下文（参见此文章）。
contain 属性值为 layout、paint 或包含它们的组合值（例如 contain: strict、contain: content）的元素
放置在 top layer 的元素及其对应的 ::backdrop。例如 fullscreen 元素和 popover 元素

在一个层叠上下文中，子元素根据上述相同的规则进行层叠。重要的是，子层叠上下文的 z-index 值只在父层叠上下文中有意义。层叠上下文在父层叠上下文中被作为一个单独的单元对待。

总结一下：

层叠上下文可以嵌套在其他层叠上下文中，共同创建一个层叠上下文的层次结构
每个层叠上下文完全独立于其兄弟元素：在处理层叠（层叠顺序变化或渲染）时，只考虑后代元素
每个层叠上下文是自包含的：在元素内容进行层叠后，整个元素被视为父层叠上下文中的层叠顺序的一部分

注意：层叠上下文的层次结构是 HTML 元素层次结构的子集，因为只有特定的元素会创建层叠上下文。我们可以说，不创建自己的层叠上下文的元素被父层叠上下文所同化。

stacking context
图片来源，此处仅考虑 CSS2.1，忽略 CSS3 属性

指定 isolation 属性的值为 isolate 的元素会创建一个新的层叠上下文。主要配合 background-blend-mode 使用，用于把当前元素从当前层叠上下文隔离开来。

CSS containment

CSS contain 属性用于标识元素的子树是否独立于页面中的其他部分（允许浏览器自动性能优化）

取值如下：

none
size：开启size containment。意味着此元素的子元素尺寸无法影响元素本身的尺寸，计算其尺寸时视为无子元素（包括伪元素，如 ::before ::after ::marker）。可使用 contain-intrinsic-size 指定应用此值的元素的尺寸。若不手动给予其尺寸，则多数时候元素尺寸将变为零。替换元素视为有自然宽度，无自然高度，无自然横纵比（可以有 aspect-ratio）
inline-size。仅在 inline 方向应用 size containment
layout：开启layout containment。建立独立的格式化上下文。外部元素不能影响内部布局，反之亦然
style：开启style containment。确保由 counter-increment 和 counter-set 属性所创建的新计数器的作用域被限制为此子树。
paint：开启paint containment。与 overflow: clip 类似，不会创建格式化上下文，但会创建层叠上下文。
strict：相当于 size layout paint style。即开启所有局限。尽可能使用此值来获得优化。
content：相当于 layout paint style。相对于 strict 保险一些。因为没有应用尺寸局限，元素仍然可以响应其内容的尺寸。

CSS content-visibility 属性

visible：默认值
hidden：跳过渲染其 content-box 内容。并且不能被页内查找和 tab 键顺序导航等用户代理特性访问，亦不可被选中或获得焦点（这点类似于 display: none 和 visibility: hidden）。
auto：相当于 contain: content

CSS Counter

CSS 计数器可以说是 CSS 维护的变量，counter-increment 属性在 CSS 渲染时读取。

这里只摘抄一下其形式化语法，使用方法参见MDN即可。

css

counter-reset =
  [ <counter-name> <integer>? | reversed(<counter-name>) <integer>? ]+  |
  none

counter-increment =
  [ <counter-name> <integer>? ]+  |
  none

CSS 坐标系

Javascript 接口参见此处

offset：相对于当前元素（padding-box）的左上角（即所谓偏移）
client：相对于视图（viewport）的左上角
page：相对于文档（即 Document.documentElement）的左上角
screen：相当于屏幕（显示器）的左上角

←Back to home