5.2 CSS层叠性
CSS层叠性表示CSS属性最终结果值的计算过程，它的研究内容是：一个元素的一个CSS属性的最终实际值actual value是什么。属性没有设置值不表示没有值，设置值不一定是最终实际值。
CSS层叠性的处理过程包含8类值与6个子特性：属性默认性、标签样式默认性、继承性、覆盖性、计算性、无效性（适用元素）。
w3c与MDN术语说明。
author作者(w3c、MDN) = 开发人员(本教程)
user agent用户代理(w3c、MDN) = 浏览器(本教程)
user用户(w3c、MDN)。建议忽略，本教程无对应术语。
5.2.1 处理过程示例
1、任务说明
任务：求div1元素width属性的最终实际值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
.parent{
width: 400px;
background-color: orange;
}
.div1 {
width: 100px;
background-color: #0aaa76;
}
#div1 {
width: 66.6666%;
}
</style>
</head>
<body style="margin: 0;">
<div class="parent">
<div class="div1" id="div1">小步教程</div>
</div>
</body>
</html>
2、层叠处理过程
该示例属性值的处理过程包括5类值：声明集declared value、指定值specified value、计算值computed value、应用值used value、最终实际值actual value。
任务。求解div1元素width属性的最终实际值。
第1步：收集div1的width设置，存在两处声明值declared value：100px与66.6666%。
第2步：ID选择器#div1优先级高于类选择器.div，所以采用66.6666%，此值即指定值specified value。
第3步：百分比值无法直接使用，需转化为绝对值。因为父div宽度400px，绝对值400*66.6666%= 266.6664px，此值即计算值computed value。
第4步：因为width属性对于当前div元素有效，所以应用值used value等于计算值computed value，即266.6664px。
第5步：最终显示时，当前环境只支持3位小数px值，转化成26.666px，此值即最终实际值actual value。
误差说明。上述数据不一定代表真实数据，仅说明过程。实际会出现偏程，两个原因：操作环境、显示器、浏览器不同；浏览器计算小数与日常计算不同，存在误差。
开发者工具“计算样式”面板的属性值表示最终实际值actual value。查看结果如下。
开发者工具“样式”面板的属性值表示声明值declared value。
3、应用值used value
通常情况下，应用值used value等于计算值computed value，特殊情况说明见后续。
4、术语说明
术语说明—计算。 “计算值”、“计算样式”、“计算性”属于专用术语，所以各步骤描述时，如果不是表示computed value，会避开“计算”这个词，而使用“处理”、“转化”、“生成”等常用描述，它们的实质也是计算。
术语说明—指定。“指定值specified value”属于专用术语，所以各步骤描述时，如果不是表示specified value，会避开“指定”这个词。
过程简化说明。CSS3描述层叠处理过程更为复杂，这里相应简化且含义不变。
5.2.2 处理过程概括说明
第1步：收集属性的声明值declared value。
声明值的四种来源包括：开发人员声明值、浏览器为标签声明默认值、从祖先元素继承的属性值、属性的初始默认值。声明值至少会有一处，即属性的初始默认值。
第2步：该属性的一处或多处声明值经过优先级处理生成指定值specified value。
FAQ：这里的“指定值specified value”是开发人员直接指定值吗？不是。按照严格术语，“开发人员指定值”对应“声明值declared value”。经过该步处理生成的值才是指定值specified value。
第3步：指定值specifed value进一步处理生成计算值computed value。
这个步骤主要包括两方面的内容：
（1）绝对化处理。相对值转化成绝对值，例如尺寸值20%、rem、em等相对单位值，都需转化成px绝对单位值。例如：指定值66.6666%转化成计算值266.6664px。
（2）属性冲突造成的一个属性的值被另外一个属性自动修改。例如overflow-y:visible被overflow-x: hidden自动修改为overflow-y: auto。
第4步：计算值computed value进一步处理生成应用值used value。
此步骤包括两个方面：
（1）无效性处理。如果当前属性适用于当前元素，则应用值等于计算值；如果当前属性不适用于当前元素，则应用值used value为空，也就是属性无效。例如position: static使left属性值无效，因为left属性的适用元素不包括position: static的元素。 详情见“5.8无效性”与“5.10 CSS属性间的制约性”。
（2）依赖绝对化处理。元素的CSS属性值可能依赖父元素布局，例如div使用属性默认值width: auto，它的宽度与父元素一致，需要等父元素宽度计算完成。该元素该属性的计算值computed value仍是auto，应用值used value才将auto转化成绝对值，例如200px。
第5步：应用值used value进一步处理生成实际值actual value。
根据本地环境限制要求转化成有效值。例如尺寸值精度过高，当前显示设备不支持，则转化成支持的低精度值。
5.2.3 处理过程对应的CSS特性
根据层叠处理流程，整理子特性如下：
（1）属性初始默认性。第1步收集声明值时，初始默认值是其中一个来源。
（2）标签样式默认性。第1步收集声明值时，浏览器为标签设置样式是其中一个来源。
（3）继承性。第1步收集声明值时，从祖先元素继承的样式是其中一个来源。
（4）覆盖性（选择器优先级）。第2步多处声明值生成指定值specified value时，通过选择器优先级判断。
（5）计算性。第3步生成计算值computed value时，通过计算性处理。具体场景包括：绝对化处理、属性值被自动修改。
（6）无效性（适用性）。第4步生成应用值used value时，如果属性不适用元素，则属性无效或者进一步计算成有效值。
