W3C规范阅读随笔

写在前面的

        该博客为我阅读 CSS 2.1 规范时的随笔。为了方便与原规范中的章节对应上，章节信息与相关 W3C 规范中的内容保持一致。以下只记录了本人认为对于 CSS 编写者较为重要的部分，所以章节信息并不连续。

        Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 地址为：https://www.w3.org/TR/2011/REC-CSS2-20110607/。

8 线框模型

        CSS 线框模型（box model）描述为文档树中的元素生成的矩形线框，并根据视觉格式化模型（visual formatting model）进行布局。

8.1 线框尺寸（dimensions）

8.3 外边距属性： 'margin-top'，'margin-right'，'margin-bottom'，'margin-left'和'margin'

margin 属性允许负值，但可能存在具体实现限制。

'margin-top' 和 'margin-bottom' 这两个属性对非替换的行内元素无效。

8.3.1 合并外边距

CSS 中，两个或多个线框（可能但并不一定是兄弟）的相邻的 margin 会被结合成一个 margin。margin 按这种方式结合叫做合并（collapse）。

相邻的垂直 margin 会合并，除了：

• 根元素线框的 margin 不会合并
• If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

水平 margin 不会合并

两个 margin 是相邻的，当且仅当：

• 都属于流内块级线框，处于同一个块格式上下文
• no line boxes, no clearance, no padding and no border separate them
• both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
  • top margin of a box and top margin of its first in-flow child
  • bottom margin of box and top margin of its next in-flow following sibling
  • bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height
  • top and bottom margins of a box that does not establish a new block formatting context and that has zero computed 'min-height', zero or 'auto' computed 'height', and no in-flow children

合并后的 margin 也能与另一个 margin 相邻，只要其 margin 的任意一部分与那个 margin 相邻就算

注意 相邻 margin 也可以由不具有兄弟祖先关系的元素形成

注意 上面的规则表明：

• 浮动的线框与任何其他线框之间的 margin 不会合并（甚至一个浮动线框与它的流内子级之间也不会）
• 建立新的块格式化上下文的元素（例如，浮动线框与'overflow'不为'visable'的元素）的 margin 不会与它们的流内孩子合并
• 绝对定位的线框 margin 不会合并（甚至与它们流内子级也不会）
• 流内块级元素的 bottom margin 总会与它的下一个流内兄弟的 top margin 合并，除非该兄弟（元素）具有 clearance
• 流内块级元素的 top margin 会与它的第一个流内块级子级的 top margin 合并，条件是该元素没有 top margin 和 top padding，并且其孩子不具有 clearance
• 一个'height'为'auto'并且'min-height'为0的流内块级线框的 bottom margin 会与它的最后一个流内块级子级的 bottom margin 合并，条件是该盒没有 bottom padding 和 bottom border，并且其孩子的 bottom margin 没有与具有 clearance 的 top margin 合并
• 线框自身的 margin 也会合并，条件是 'min-height' 属性为0，'height'为0或'auto'，且不含行框的话，那么其所有流内孩子的 marign（如果存在的话）都会合并

9 视觉格式化模型

9.1 视觉格式化模型介绍

        视觉格式化模型的作用是，指导用户代理如何在可视化媒体上处理文档树。

        在视觉格式化模型中，每一个文档树中的元素都会根据线框模型来产生0个或多个线框。这些线框的布局由以下因素控制：

• 线框的尺寸和类型
• 定位方案（包括普通流、浮动和绝对定位）
• 文档树中元素间的关系
• 外部信息（如视口大小，内含图片的固有尺寸等）

9.1.1 视口（viewport）

        用于连续媒体的用户代理通常为用户提供视口（屏幕上的窗口或其他观看区域），用户通过该视口查阅文档。当视口的大小变化时，用户代理可以改变文档的布局。 

1.2 包含块（containing block）

        很多线框的定位和尺寸的计算，都取决于一个矩形边界，这个矩形被称作是包含块。 一般来说，一个元素生成的线框会作为它子孙元素的包含块；我们称之为：一个元素线框为它的子孙元素建造了包含块。可见包含块是一个相对的概念。

        值得注意的是，每个线框的位置都被它的包含块所影响，但是它不会被这个包含的块所限制，它有可能溢出。

9.2 控制线框的生成

        视觉格式化模型的一部分工作就是从文档元素生成线框。生成的线框拥有不同的类型，并会对视觉格式化模型的处理产生影响。生成线框的类型取决于 CSS 的“display”属性。

9.2.1 块级元素和块级线框

        备注：“元素”是源文档层面的东西，“线框”是视觉格式化模型层面的东西，可以说“元素”被用户代理格式化为“线框”。

块级元素（block-level elements）

• 被格式化成视觉上的块的元素

• “display”属性的下列值能让一个元素变成块级的：“block”，“list-item”和“table”

块级线框（block-level box）

• 块级线框参与块格式化上下文（block formatting context）

• 每个块级元素至少生成一个块级线框，称为主块级线框(principal block-level box)。有些元素，比如“list-item”元素，会生成额外的线框来放置列表项符号，这些额外的线框相对于主块级线框来放置

块容器线框（block container box）

• 除了表格线框与替换元素外，一个块级线框也是块级容器线框（block container box）

• 一个块级容器线框要么只包含块级线框，要么建立了行内格式化上下文并因此只包含行内线框（备注：与匿名块线框有关）

匿名块线框（anonymous block box）

        备注：为更容易定义格式化，有时候需要添加额外的线框，这些线框称为匿名线框。匿名线框无法通过浏览器中的审查元素功能来查看，也无法通过 CSS 选择器来操作，所以匿名线框无法为其设置样式，所有样式均来自继承或初始值（initial）。匿名框有两种，一种是匿名块线框，一种是匿名行内线框。

        在一个这样的文档中：

<div>
    Some text
    <p>More text</p>
</div>

        （假设 div 和 p 均为“display: block”），div 似乎既有行内内容也有块内容。为了更容易定义格式化，我们假设“Some text”四周有一个匿名块线框。

         上例图片展示了 3 个盒子，其中一个是匿名的。

水平格式化的“7 大属性”是：margin-left、border-left、padding-left、width、padding-right、border-right 和 margin-right。这些属性与块级线框的水平布局有关。

这 7 个属性的值加在一起必须是元素包含块的宽度，这往往是块元素的父元素的 width 值。

使用 auto

如果设置 width、margin-left 或 margin-right 中的某个值为 auto，而余下两个属性指定为特定的值，那么设置为 auto 的属性会确定所需的长度，从而使元素线框的宽度等于父元素的 width。

如果所有这 3 个属性都设置为非 auto 的某个值——或者，按 CSS 的术语来讲，这些格式化属性过分受限（overconstrained）——此时总会把 margin-right 强制为 auto。

注意：只是对从左向右读的语言（如英语）将 margin-right 强制为 auto。如果是从右向左读的语言，一切正相反，所以会把 margin-left 强制为 auto，而不是 marign-right。

2.2 行内级元素和行内盒子

行内级元素（inline-level elements）

• 当元素的 CSS 属性 display 为 inline、inline-block 或 inline-table 时，称它为行内级元素

• 视觉上它将内容与其它行内级元素排列为多行。典型的如段落内容，有文本或图片，都是行内级元素

行内级线框（inline-level boxes）

• 行内级元素生成行内级线框

• 参与行内格式化上下文（inline formatting context）

• 行内级盒子分为行内盒子和原子行内级盒子

行内线框（inline boxes）

• 参与生成行内格式化上下文的行内级盒子称为行内盒子

• 所有 display:inline 的非替换元素生成的盒是行内盒子

原子行内级线框（atomic inline-level boxes）

• 不参与生成行内格式化上下文的行内级盒称为原子行内级盒子

• 这些盒子由可替换行内元素，或 display 值为 inline-block 或 inline-table

9.4 普通流（Normal flow）

        普通流中的线框不属于块格式化上下文就是属于行内格式化上下文。块级线框参与块格式化上下文。行内线框参与行内格式化上下文。

9.4.1 块级格式化上下文

        满足如下任意条件的元素均将在其内部建立块级格式化上下文：

• 浮动 (元素的 float 不为 none)
• 绝对定位 (元素的 position 为 absolute 或 fixed)
• 行内块 (元素的 display: inline-block)
• 表格单元格 (元素的 display: table-cell，HTML 表格单元格默认属性)
• 表格标题 (元素的 display: table-caption, HTML 表格标题默认属性)
• overflow 的值不为 visible 的块级线框

        在块级格式化上下文中，从包含块的顶部开始，线框一个接一个地垂直排列。两个兄弟线框之间的垂直距离由“margin”属性决定。块级格式化上下文中相邻块级线框之间的垂直方向会发生边界坍塌。

9.4.2 行内格式化上下文

        在行内格式化上下文中，线框是从包含块的顶部一个挨一个水平放置的。这些线框之间的水平外边距，边距和内边距都有效。线框可能会以不同的方式垂直对其，以它们的底部或者顶部对其，或者以它们的底部或者顶部对其，或者以它们里面的文本的基线对齐。

9.4.3 相对定位

        当一个线框根据普通流或者浮动摆放好后，它可能会相对于该位置移动，称之为相对定位。如果相对定位导致具有'overflow:auto'或'overflow:scroll'的盒溢出了的话，UA必须让用户能够访问这部分内容（在其偏移位置），此时，滚动条的创建可能会影响布局。

        相对定位的盒保持它在常规流中的大小，包括换行和空格都会原样保留。

9.5 浮动

        一个浮动线框会向左或向右移动，直到其外边界挨到包含块边界或者另一个浮动盒的外边界。如果存在行框，浮动线框的上外（边界）会与当前行框的上（边界）对齐。

行布局

匿名文本

匿名文本（anonymous text）是指所有为包含在行内元素中的字符串。

em 框

em 框在字体中定义，也称为字符框（character box）。实际的字形可能必其它 em 框更高或更矮。在 CSS 中，font-size 的值确定了各个 em 框的高度。

内容区

在非替换元素中，内容区可能有两种，CSS 2.1 规范允许用户代理选择其中任意一种。内容区域可以是元素中各字符的 em 框串在一起构成的框，也可以是由元素中字符字形描述的框。在替换元素中，内容区就是元素的固有高度再加上可能有的外边框、边框或内边距。

行间距

行间距（leading）是 font-size 值和 line-height 值之差。这个差实际上要分为两半，分别应用到内容区的顶部和底部。行间距只应用于非替换元素。

行内框

这个框通过向内容区增加行间距来描述。对于非替换元素，元素行内框的高度刚好等于 line-height 的值。对于替换元素，元素行内框的高度则恰好等于内容区的高度，因为行间距不应用到替换元素。

行框

这是包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框上边的界要位于最高行内框的上边界，而行框的底边要放在最低行内框的下边界。

非替换元素的内边距、边框和外边距对行内元素或其它生成的框没有垂直效果，也就是说，它们不会影响元素行内框的高度。

9.8 比较常规流，浮动与绝对定位

10 视觉格式化模型细节

10.1 “包含块”的定义

        有时元素线框的位置和大小相对于某个特定矩形进行计算，这个矩形称为该元素的包含块。元素包含块的定义如下：

1. 包含根元素的包含块是一个称为初始包含块（initial containing block）的矩形。对于连续媒体，它的尺寸取自视口的尺寸，并且被固定在画布开始的位置；对于分页媒体，它是页面区域（page area）。初始包含块的“direction”属性与根元素的相同。
2. 对于其他元素，如果该元素的“position”属性为“relative”或“static”，则包含块是由其最近的块容器祖先框的内容边界形成的。
3. 如果一个元素的“position”属性为“fixed”，它的包含块由视口（在连续媒体中）或者页面区域（在分页媒体中）创建。
4. 如果元素的“position”属性为“absolute”，它的包含块由最近的“position”为“absolute”、“relative”或“fixed”的祖先元素创建。

浮动

浮动元素的包含块是其最近的块级祖先元素。浮动元素会生成一个块级框，而不论这个元素本身是什么。

12 内容生成，自动编码和列表

CSS 2.1 中，内容可以通过两种机制生成：

• “content”属性，结合 :before 和 :after 伪元素
• 具有值为“list-item”的“display”属性的元素

12.1 :before 与 :after 伪元素

:before 和 :after 伪元素指定了位于元素的文档树内容之前和之后的内容的位置。“content”属性，结合这些伪元素，指定了插入什么（内容）

12.2 “content”属性

Value	normal | none | [<string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Initial	normal
Applies to	:before 和 :after 伪元素
Inherited	none
Percentages	N/A
Media	all
Computed	对于元素，计算值为“normal”。对于 :before 和 :after，如果指定值为“normal”，计算值就是“none”。否则，对于 URI 值，（计算值）就是绝对 URI；对于 attr() 值，就是产生的字符串；对于其它关键字，就与指定值相同。

该属性配合 :before 和 :after 伪元素来在文档中生成内容。值含义如下：

none

不生成该伪元素

normal

对于 :before 和 :after 伪元素计算值为 “none”

uri

该值是一个 URI，指定一个外部资源（例如一张图片）。

counter

计数器可以通过两个函数来指定：“counter()”或者“counters()”。前者有两中形式：“counter(name)”或者“counter(name, style)”。

open-quote 和 close-quote

这些值会根据“quotes”属性替换为合适的字符串

attr(X)

该函数返回一个字符串，为该选择器的对象（subject）的 X 属性的值。该字符串不会被 CSS 处理器解析。如果该选择器的对象没有 X 属性，就返回一个空字符串。属性名的大小敏感性取决于文档语言。

13 分页媒体

        在 CSS 术语中，分页媒体（paged medium）是把文档表示处理为一系列离散“页面”的媒体。这与屏幕媒体有所不同，屏幕媒体是一种连续媒体（continuous medium）：文档表示为一个可滚动的“页面”。

15 字体

当一个字体名中有一个或多个空格（如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。