W3C规范阅读随笔 - CSS 2.1 规范（二）

写在前面的

        该博客为我阅读 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 声明中加引号。