CSS 属性与标准

CSS 由一系列标准组成，而不是一种具有单一版本号的语言。规范以级别和模块的形式演进，而浏览器实现的是这些文档中不断变化的子集。

级别与模块 #

W3C 从一开始就将 CSS 标准化为基于级别的系统。CSS 1、CSS 2 以及后续级别并不只是小幅修订；每个级别都对范围和结构进行了足够大的调整，因此较早的文档有一部分已经过时。

现代 CSS 通过以下模块进行描述：

• Colors;
• Backgrounds and Borders;
• Flexbox;
• Grid;
• Values and Units;
• Media Queries.

这种模块化设计使规范能够独立演进，因此浏览器可以逐步发布各项功能。

属性值 #

CSS 属性的值会经历多个阶段：

• specified value：样式表中写入的值；
• computed value：处理继承和相对单位后解析得到的值；
• used value：应用布局约束后的值。

继承遵循 computed value，因此如果父元素已经将百分比解析为绝对长度，子元素不会继承原始百分比。

例如：

.box {
  width: 80%;
}

如果父元素宽度为 1000px，计算后的宽度将变为 800px。

display #

display 属性同时控制外部和内部的布局行为。

<display> = <display-outside> <display-inside> <display-listitem>

其实际含义如下：

• outer display 控制盒子如何参与正常流；
• inner display 控制子元素如何进行布局。

因此，display 不只是一个外观属性。它会改变格式化上下文。

长度单位 #

绝对单位和相对单位分别解决不同的问题。

常见绝对单位：

• px
• cm
• mm
• in
• pt
• pc

常见相对单位：

• em
• ex
• ch
• cap
• lh
• ic

相对单位会随字体度量和书写模式缩放，因此十分有用。

标准文档 #

主要参考文档包括：

• CSS 规范索引；
• CSS snapshots，用于总结平台的当前状态；
• 各个模块的草案，用于定义功能系列。

这一结构很重要，因为“CSS 标准”通常指一组持续演进的文档，而不是一份单一的整体式手册。

实践规则 #

编写 CSS 时，应将以下三个层次分开：

1. 属性语法；
2. 计算后的布局行为；
3. 定义该属性的标准模块。

这种分离可以让浏览器行为更容易调试，也便于跟踪哪些部分是稳定的、实验性的或已经过时的。