我们要计算属性值，那么我们就先要知道网页在浏览器中大致的渲染过程。 一个网页在浏览器中是按照树形结构渲染，需要先将一条线上的渲染完成才会去渲染下一个。（每个元素的渲染前提就是CSS声明必须都有属性值）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM树</title> </head> <body> <a href=""></a> <p> <h1></h1> <a href=""></a> <span> <i></i> </span> </p> <img src="" alt=""> <div></div> </body> </html>DOM树的结构： html是根节点（然后它下面有两个节点） head节点和body节点（他们中又包含这他们里面的标签） 我们拿head节点举例，它下面有meta节点和title节点，而按照代码从上到下的顺序，树的左边节点一条线就有html到head到meta 树的执行就是一条线要全部执行完才会去执行另外一条，并且是从左到右执行。
属性值的计算：（有四步） 1.确定声明值： 我们需要知道就算不给元素写样式，但是你看到的元素也是由样式的，那是因为当我们没有写样式的时候浏览器会给样式给元素。 而确定声明值也就是没有样式冲突属性值，如：
a:-webkit-any-link { color: -webkit-link; cursor: pointer; text-decoration: underline; }当我们没有给a元素声明这些值时，它就会使用浏览器赋给它的值，和没有冲突的值。
2.层叠冲突： 前面的确定声明值是给没有声明冲突的声明赋值，而有冲突的就需要在第二步判断哪个声明值是最终会赋给它的，如：
p{ color: #008282; } div p{ color: #f40; } div p.p{ color: #abcdef; } #div p .p{ color: #000; }我们首先需要判断重要性： 重要性依次为： 1.如果在样式中有!important那么在样式的选择中，会优先选择它（默认为最高级） 2.然后就是作者样式（程序员样式）
在程序员样式中：内联样式的优先级最高，然后就是内部样式和外部样式（它们需要看在程序中的先后顺序，按照就近原则）3.最后就是浏览器赋予元素的样式
如果在重要性一致的情况下，那么就会比较选择器的权重值： 内联样式（A）>id选择器(B)>类、伪类、属性选择器©>元素、伪元素选择器(D) 而浏览器内部会生成一个四位数（不是十进制数，大约是二百多才会进一位） A占千位，B占百位，C占十位，D占个位 如上代码的权重值依次为0001、0002、0012、0111 所以我们可以比较出0111最大，所以我们的color:为#000；
如果在权重值相同的情况下，我们会按照就近原则选择元素的属性值，如：
#div p .p{ color: #000; color:#fff; }那么我们这个时候就会选择color值为#fff;
3.使用继承： 经过上面两步，如果还是没有属性值，那么回去找包含元素（父元素），继承可以继承的属性值（一般情况下都是和文本相关的属性值才可以被继承） 当然有两个特殊的属性值：inherit（强制继承） 如：
div{ width: 980px; background-color: #2C90CF; } div span{ width:inherit; background-color:inherit; }span元素本来是不可以继承width和background-color的属性值的，但是使用inherit就会强制继承 而如果你不想继承也可以用initial（恢复初始值）也就是可以不让它继承父元素的属性值
4.使用默认值（CSS赋予元素的） 页面需要渲染的前提条件就是，使用元素的属性必须都有值。 使用最后一步就是将到现在还没有值的属性赋值，然后完成渲染。
