5.8 CSS计算性
计算性对应指定值specified value到计算值computed value的变化。计算性不仅包含属性基本特征的两项内容：“百分比”与“计算值”，还包含属性被自动修改的场景。属性被自动修改的详细说明见“5.11.3 A属性自动修改B属性”。
5.8.1 百分比
“百分比”说明百分比的计算规则，主要说明相对于哪个元素的哪个属性长度。只有部分尺寸型属性可设置为百分比。以line-height属性为例，MDN查询其“百分比”。表示相对于当前元素的字体大小。
Percentages: refer to the font size of the element itself
示例代码
<body>
<div style="font-size: 20px;line-height: 150%;">小步教程 xiaobuteach.com</div>
</body>
开发者工具查看计算样式
以width属性为例，MDN查询其“百分比”。表示相对于包含块containing block的宽度。
Percentages: refer to the width of the containing block
包含块containing block指基准定位元素盒子的特定区域，下列示例对应父元素盒子，完整说明见“第10章 定位模型”。
<body>
<div style="width: 500px;">
<div style="width: 50%;background-color: #0aaa76;">小步教程 xiaobuteach.com</div>
</div>
</body>
查看内部div的计算样式，width值250px。
5.8.2 计算值
属性基本特征的“计算值”对应计算性的一部分。
仍以line-height为例，这里研究子元素的line-height值。MDN描述的“计算性”如下。
计算值： 对于百分比和长度值，其（结果）为绝对长度；否则（结果）为指定值。
注：上述括号内的内容为本教程补充。子元素继承父元素的计算值computed value。当line-height是百分比时，计算值会进行绝对化处理。
示例代码
<div class="div1" style="font-size: 30px;line-height: 150%; color: #fff;">
<div class="div1-1" style="background-color: #0aaa76;">小步教程</div>
<div class="div1-2" style="font-size: 20px;background-color: #4aa6fc;">xiaobuteach.com</div>
</div>
父元素div1设置font-size与line-height，当line-height是百分比时，绝对值等于font-size*line-height百分比值，即30*150%=45px。
问题。子元素重新设置font-size，那么它的line-height值是多少？根据上述规则说明，仍然是45px。所以line-height通常不用百分比值，而用系数值，例如1.5，1.5与150%并不等价，系数值能够完全继承。
ConceptError005错误理解：认为百分比会直接继承。
ConceptError006错误理解：认为百分比值与系数值等价。认为line-height值150%等价1.5。
所以计算值computed value的运用表现在两个方面：首先，当前元素最终实际值的计算过程的中间数据；其次，子元素如果继承则继承父元素的计算值computed value。
