CSS display

[anjia]

CSS 是一门语言，描述 HTML、XML 等 structured documents 在 screen, paper 等媒介上的 rendering。

CSS Display Module Level 3

https://drafts.csswg.org/css-display

这个模块描述了：

• 如何从 document element tree 生成 CSS formatting box tree
• 定义了控制它的 display 属性

处于 at-rist 状态的特性，可能会在CR阶段删掉而不用再发布新的CR了：

• 在 run-ins 存在时，用 ::first-letter
• display: run-in
• display 的所有 multi-keyword 值

at-rist 是 W3C Process 的一个术语，并不是说这个特性后续会被 dropped 或者 delayed。 而是 WG 觉得此特性实现成本略高，在短期内实现有难度， 所以在将本模块升级为 PR 时，可以删除该功能，而不用再发布一个新的 CR 了。

介绍

CSS 处理的源文档，是组织成 elements 和 text nodes 的 tree。CSS 将它 render 到 canvas 上（比如 screen, paper 或者 audio stream）。为了 render，CSS 会生成一个中间结构 box tree ，代表渲染文档的 formatting structure。

• box tree 里的每一个 box ，代表着 canvas 上与之对应的 element 和 pseudo-element
• box tree 里的每一个 text run ，代表着 text-nodes 里的内容

在创建 box tree 树之前，CSS 会先用 cascading 和 inheritance，将每个 CSS 属性的计算值分配给中的每个 element 和 text-node。

接着，对每个 element，CSS 会根据其 display 的值生成零个或多个 boxes

• 通常，一个 element 生成一个 box
• 但也有 display 的值会生成多个 box
  • eg. display:list-item 会生成一个 principal block box 和一个 marder box
• 有的 display 值会让该元素及其后代不生成任何 box
  • eg. display:none dipaly:contents

Boxes 经常就叫它们的 display 类型，比如由display:block元素生成的 box 就叫 block box 或者 block。元素的 principal box 的 parent box 是它最近的祖先元素 principal box

box 和生成它的 element 有相同的样式，除非另有说明。通常，可继承的属性，会分配给 principal box，然后通过 box tree 继承到由同一个 element 生成的其它全部 box。不可继承的属性，默认会应用到 principal box；但是当 element 生成多个 boxes 的时候，它有时会定义成应用到不同的 box，比如：应用到 table 元素的 border 属性，会应用到它的 table box，但不会应用到它的 principal table wrapper box。如果值计算的过程改变了这些 boxes 的样式，那么元素的样式会被 requested (比如通过 getComputedStyle())，element reflects，对每个属性，值从 box 到应用该属性的 box。

类似的，每个相邻 text nodes 的连续序列生成一个包含它们内容的 text run ，它的样式和生成它们的 text nodes 相同。当然，如果序列不包含文本，那它就不生成 text run 了。

anonymous box 不和任何 element 关联。在有些情况下生成 anonymous boxes，是为了修复 box tree，i.e, 当它需要特定的嵌套结构，但是 element tree 里生成的 boxes 没有提供这种嵌套结构时。e.g. table cell box 就需要一个特定类型的父框 table row box，即便它的父不是 table row box。不同于生成元素的 boxes（它的样式通过 element tree 严格继承），anonymous boxes 是从它的 box tree 父系来继承的。

在 layout 的过程中，boxes 和 text runs 会被分成多个 fragments 。这当什么时候会发生呢？比如，当一个 inline box 或者 text run 跨行时，或者一个 block box 跨页/列时。所以一个 box 由一个或者多个 box fragments 组成；一个 text run 由一个或者多个 text fragments 组成。更多关于 fragmentation 的，可以查看 [css2-break]。

关于 "aural" box tree，可查看 CSS Speech Module ps. CSS WG 已经停止了在该模块上的工作

---

1. 模块交互
   • 此模块替换/扩展了 CSS2 里的 display 属性定义
   • 此模块里的所有属性，都不适用于伪元素::first-line 和::first-letter
2. 值
   • 此规范遵循 CSS2 里的 CSS property definition conventions
   • 本规范中未定义的值类型在 CSS Values and Units Module Level 3 中定义
   • 其他 CSS 模块可以扩展这些值类型的定义
   • 除了列出的之外，此规范中定义的所有属性还接受 CSS-wide keywords 关键字作为其属性值
     • initial
     • inherit
     • unset 若属性可继承，则值同inherit, 否则同initial

[anjia]

以上内容，概况为：

---

box tree i.e. CSS formatting structual box tree

• box / anonymous box
  • eg. principal box
    • 通常，一个 element 生成一个 principal box，代表了它自己及其里面的内容
  • eg. principal block box, marker box
  • eg. block box (or block), inline box
  • eg. table grid box, table wrapper box
  • eg. table row box, table cell box
• text run

更多术语见 https://drafts.csswg.org/css-display/#glossary