css理论基础

November 5, 2023November 11, 2024

css

包含块（containing block）

包含块是一个矩形区域，它为与其关联的（后代）盒子提供了尺寸和定位的基础。

确定一个元素的包含块

CSS2 定义：
9.1.2 Containing blocks
10.1 Definition of "containing block"

确定包含块的流程完全取决于元素 position 属性的值：

以下为 MDN 描述，严格定义参见规范

若 position 属性值为 static、relative 或 sticky，则包含块由最近的祖先元素的内容框边缘形成，该祖先元素要么是块级容器（例如 inline-block、block 或 list-item 元素），要么建立了格式化上下文（例如 table 容器、flex 容器、grid 容器或块级容器本身）。
若 position 属性值为 absolute，则包含块由最近的 position 值不是 static（fixed、absolute、relative 或 sticky）的祖先元素的内边距框边缘形成。
若 position 属性值为 fixed，则包含块由 viewport（对于连续媒体，continuous media，往往是屏幕上的网页）或页面区域（对于分页媒体，paged media，往往是打印机打印的文档）建立。
若 position 属性值为 absolute 或 fixed，包含块也可能由最近的具有以下任意属性的祖先元素的内边距框边缘形成：
- filter、backdrop-filter、transform 或 perspective 的值不是 none。
- contain 的值为 layout、paint、strict 或 content（例如 contain: paint;）。
- container-type 的值不是 normal。
- will-change 的值包含一个属性，该属性的非初始值会形成一个包含块（例如 filter 或 transform）。
- content-visibility 的值为 auto。

百分比是如何计算的

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

This work is licensed under CC BY-NC-SA 4.0