块格式化上下文

一致性要求和建议

CSS 渲染模型中不考虑替换元素的内容。

在 CSS 2.1 中，只有替换元素才能具有内在维度。对于没有可靠分辨率信息的光栅图像，必须假设每个图像源像素的大小为 1 像素单位。

HTML 的元素名是大小写不敏感的但是在 XML 中是大小写敏感的

0 长度单位后的单位是可选的

选择器

E[foo] 匹配设置了”foo”属性（无论值是什么）的 E 元素

E[foo=”warning”] 匹配所有”foo”属性值恰好是”wraning”的 E 元素

E[foo~=”warning”] 匹配所有”foo”属性值为一列空格分隔的值，且其中之一恰好是”warning”的 E 元素

E[lang|=”en”] 匹配所有”lang”属性值为一列以”en”开头（从左向右）用连字符分隔的值的 E 元素

link 伪类：:link 与:visited

动态伪类： :hover，:active 与:focus

:first-line 伪元素对段落内容的第一个格式化行应用特殊样式(选择器”P:first-line”不会匹配任何真实 HTML 元素。它匹配一个（与 CSS 规范）一致的用户代理将在每个段落的开头插入的伪元素) :first-line 伪元素只能用于块容器元素

:first-letter 伪元素必须选择一个块的第一行的第一个字母

当:first-letter 和:first-line 伪元素被应用在一个具有使用:before 和:after 生成内容的元素，它们应用于元素包括生成的内容在内的首字母或首行

层叠和继承

为了让用户代理能够避免为不支持的媒体类型检索资源，编写者可以指定带媒体依赖（media-dependent）的@import 规则。

1	@import url("fineprint.css") print;

用户样式表，简单来说就是浏览器的使用者自己编写的一份默认样式表，编写者样式表，是网页的编写者编写的样式表，第一次听说这种说法

视觉格式化模型

Block-level 块级元素包含以下类型 block list-item table list-item 会生成附加的盒子，相对于主盒子放置

block container box 只包含块级元素或者内联块级元素，

匿名块级盒子当块级盒子同时包含内联的文本和块级元素时，我们认为这里有一个匿名的盒子包围了这些文本，如果一个块级盒子包含了块级盒子，我们强制让他只包含块级盒子

以@开头的规则（At-rules）需要以分号来结尾

CSS 2.1 用户代理必须忽略在块内或在除@cherset 或@import 规则之外的任何非忽略语句之后发生的任何“@import”规则。一下是非法的，解决方法是将样式的语法放在 At-rules 之后

1
2
3

@import "subs.css";
h1 { color: blue }
@import "list.css";

盒模型

‘margin-top’, ‘margin-bottom’ 这两个属性对非替换的行内元素无效

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

都属于流内（in-flow）块级盒，处于同一个块格式化上下文

没有行框（line box），空隙，内边距和边框把它们隔开（注意，因此某些 0 高度行框（见 9.4.2）会被忽略）
都属于垂直相邻框边界（vertically-adjacent box edges），即形成下列某一对：
- 盒的上边距与其第一个流内（in-flow）孩子的上边距
- 盒的下边距与其下一个流内紧挨着的兄弟的上边距
- 最后一个流内孩子的下边距与其 height 计算值为’auto’的父元素的下边距
- 盒的上边距和下边距，要求该盒没有建立新的块格式化上下文，并且’min-height’计算值为 0，’height’计算值为 0 或’auto’，还没有流内孩子
margin 和 padding 的百分比数值都相对于包含块，border 不能设置百分比数值