全面解析：HTML页面的加载全过程(四)--浏览器渲染之样式计算
主线程遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style。
通过前面生成的DOM 树和 CSSOM 树，遍历 DOM 树，为每一个 DOM 节点，计算它的所有 CSS 属性，最后会得到一棵带有样式的 DOM 树–也叫“渲染树 Render Tree”
可在控制台查看样式计算
属性值的计算过程
1、确定声明值
声明值就是 “自己所书写的 CSS 样式+浏览器内置的样式表” 相加得到全部的声明值，并且将部分值进行转换
如：color: red;转换为`color: rgb(255, 0, 0);
font-size: 2em;转换为font-size: 14px;`。
2、层叠冲突
在确定声明值时，声明的样式规则发生了冲突，解决冲突，下面这三个步骤：
（一）比较源的重要性
样式有三种来源：
1. 浏览器默认样式（用户代理样式）：浏览器会有一个基本的样式表来给任何网页设置默认样式
2. 网页设计者定义的样式（页面作者样式）：即外联样式、内部样式、style行内样式等
3. 控制台调试样式（用户样式）：浏览器的用户在开发者模式里使用自定义样式表定制使用体验
对应的重要性顺序依次为：网页设计者定义的样式 > 用户样式 > 浏览器默认样式
（二）比较优先级–权重
如果在同一源中出现了样式声明冲突，则比较其优先级。
权重的等级
!important，权重最大，会覆盖页面内任何位置定义的元素样式。
内联样式，写在标签中的，权重为1000
ID选择器，权重为0100
类、伪类、属性选择器，权重为0010
标签、伪元素选择器，权重为0001
通配符、子选择器、相邻选择器等，权重为0000
我手写了计算权重的方法：
案例1
<ul id="nav" class="nav"><li class="active" id="bb"><a href=""></a></li>
</ul>ul#nav li.active a 权值为（0,1,1,3）；`ul li.active a` 权值为（0,0,1,3）；---一个伪类，三个标签`ul.nav li.active a` 的权值为（0,0,2,3）；`
如是行内样式（内联样式），权值为（1,0,0,0） ；某项 CSS 属性后面带 `!important` 时，权值最大。案例2
都是设置文字颜色，应该以哪个为主？
<!DOCTYPE html>
<html lang="en">
<head> <style>/* 权重 0,0,1,1 */.nav a {color: red;}/* 权重 0,0,1,0 */.blog {color: yellow;}/* 权重 0,0,2,0 */.nav .blog {color: blue;}</style>
</head>
<body><div class="nav"><a href="" class="blog">java</a><a href="">python</a><a href="">css</a><a href="">ruby</a></div>
</body>
</html>分析：
0011>0010 以红色为主
0020>0011 以蓝色为主
案例3
<!DOCTYPE html>
<html lang="en">
<head><style>a{color: yellow;} /*权重：0,0,0,1*/div a{color: green;} /*权重：0,0,0,2*/.demo a{color: black;} /*权重：0,0,1,1*/.demo input[type="text"]{color: blue;} /*权重：0,0,2,1*/.demo *[type="text"]{color: grey;} /*权重：0,0,2,0*/#d1 a{color: orange;} /*权重：0,1,0,1*/div#d1 a{color: red;} /*权重：0,1,0,2*/</style>
</head>
<body><a href="">第一</a> <div class="demo"><input type="text" value="第二" /><a href="">第三</a></div><div id="d1"><a href="">第四</a></div>
</body>
</html>分析：
#d1 a和div#d1 a 设置相同的属性，但0101<0102 以红色为主
（三）比较次序----重要：如权重值相同，“就近原则”
后声明的样式会覆盖先声明的样式。
p{/* 会被覆盖 */color: yellow;
}p{ color: green;
}
3、使用继承
对于每一个 DOM 节点，都会去计算它的所有 CSS 属性。
对于未声明的属性，并不是直接使用默认值，而是使用继承值。
<div><p>java</p>
</div>
div{color: red;
}
这里<p>标签会继承来自<div>的color: red样式。
继承原则：
- 就近原则，谁近就继承谁的，与权重无关。
- 大部分字体相关的属性都是可继承的
4、使用默认值
如果最后仍不能确定属性值，则使用浏览器默认值。
