浅谈页面渲染的属性计算

  浏览器渲染html元素的前提条件就是该元素的所有CSS属性都有值，而一个元素，从所有CSS属性无值到有值的过程就叫属性计算过程。

属性值的计算

1. DOM树和样式规则先通过filtering对页面规则进行以下条件筛选（选择器匹配、属性有效、符合当前、media）
   声明值：一个元素的某属性可能有0到多个声明值，即先把作者样式表和浏览器默认样式表中没有冲突的声明作为css的属性值
   比如:p { font-size:16px}和p.text { font-size:1.2em }
2. cascading(层叠冲突)：通过比较重要性（!important），比较特殊性（权重），比较源次序找出优先级最高的属性值。
   层叠值：在层叠过程中，赢得优先级比赛的那个值。
   比如:p { font-size:16px !important}和p{ font-size:1.2em }

重要性： 作者 > 浏览器
特殊性（权重）： !important > 内联样式 > id > (class,属性选择器、伪类选择器) > 元素选择器 > 通配符 *
源次序：权重相同的情况下，靠后的胜出

3. defaluting：当层叠值为空时，若可以继承，则继承父元素的值；否则使用默认值。
   指定值：经过cascading和defaluting之后，保证指定值一定不为空。
4. resolving：将属性值中的相对值或者关键字转为绝对值
   计算值：一般情况下，指浏览器会在不进行实际布局的情况下所能得到的具体值，比如60%
5. formatting：将计算值进一步转换
   使用值：指进行实际布局时使用的值，不会再有想对的值或关键字。比如400.1px
6. constraining：将小数像素值转为整数
   实际值：指渲染时实际生效的值。比如400px
   

思考：为什么 a 标签的颜色值不继承父元素

<style>
  div {
    color: red
  }
<style>
<div>
  <a href="#">lorem</a>
</div>

运行结果如下：

原因：由下图可知，a标签有默认值，所以不会继承父元素

解决办法：给标签a额外添加样式

a {
  color: inherit   // 浏览器默认样式表有值，不会走继承，所以要在层叠冲突中覆盖浏览器默认样式表
}

添加后运行结果如下：