CSS2.2【二】CSS2.2的概念处理模型

[fearnliu]

CSS2.2的处理模型

CSS2.2标准中介绍了一个支持CSS的UA（用户代理，通常是浏览器，下文相同，不再赘述）如何工作的概念模型，虽然具体实现是由UA自己决定，但这个概念模型对于我们学习前端基础知识还是很有帮助的

此模型中，UA通过以下步骤处理源代码：

1. 解析源代码并创建文档树
2. 识别目标媒体类型，通常是screen屏幕
3. 检索与目标媒体类型指定的文档相关联的所有样式表
4. 通过为适用于目标媒体类型的每个属性分配一个值来为文档树中的每个元素添加注释。属性赋值依据CSS级联和继承机制。部分值的计算取决于适用于目标媒体类型的格式化算法
5. 从注释文档树中，生成格式化结构。通常，格式化结构与文档树非常相似，但也可能有很大不同，特别是当作者使用伪元素和生成内容（content）时。首先，格式化结构不必是“树形”的——结构的性质取决于实现。其次，格式化结构也许比文档树包含更多或更少信息。例如，如果文档树中某个元素的display属性值为none，则该元素在格式化结构中不会生成任何内容。另一方面，列表元素在格式化结构中也许生成更多信息：列表元素的内容和列表元素的样式信息（例如，列表项头部的图片）。
6. 将格式化结构传送到目标媒体。（例如，打印结果，在屏幕上显示它们，将它们渲染为语音等）。

画布

对于所有媒体而言，术语画布描述了”用于渲染格式化结构的空间“。画布对于空间的每个维度是无限的，但是渲染通常发生在画布的有限区域内，由UA根据目标媒体建立。例如，UA在屏幕上渲染通常会施加最小宽度并且基于视口尺寸选择初始宽度。UA渲染到页面时通常施加宽度和高度限制。听觉用户也许对音频空间施加限制，但不及时。

CSS2.2的寻址模式

CSS2.2选择器和属性允许样式表引用文档或UA的以下部分：

• 文档树中的元素以及它们之间的某些关系（CSS元素选择器，关系选择器）
• 文档树中元素的属性以及这些属性的值（CSS属性选择器）
• 元素内容（content）的某些部分（CSS伪元素）
• 文档树中处于某种状态的元素（CSS伪类）
• 文档将在其中渲染的画布的某些方面
• 一些系统信息