聊聊css属性值的计算过程

首先一点要明确的是浏览器渲染某一个元素之前，它的每一个css属性值必须都要有确定的值，否则是没法渲染的

那么我们今天要讲的就是浏览器是怎么一步步的把每一个属性值都确定下来的。

首先我们把最主要的四个步骤简单列出来，之后再一一讲解

确定声明值

解决层叠冲突

继承

默认值

这是一个元素所有的css属性（总共大概有小几百个，这里就不一一列举了）：

/* 这时所有的值都是没有确定的 */
{
    color:?
    background-color:?
    text-align:?
    font-size:?
    font-weight:?
    display:?
    其他CSS属性:?
}

假设用户写了如下样式：

.red {
    color:red;
    font-size:40px;
}
h1 {
    font-size:26px;
}
div h1.red {
    font-size:3em;
    font-size:30px;
}

这是浏览器默认样式表：

h1 {
    display: block; 
    font-size: 2em; 
    font-weight: bold;
}

接下来我们来看看浏览器是如何根据这四个步骤将这几百个属性值全都确定下来的

1. 确定声明值

这一步就是说将没有样式冲突的属性先确定下来

那么这一步完了之后，我们可以确定如下属性：

    display: block;
    color:red;
    font-weight: bold;

{
    color:red;
    background-color:?
    text-align:?
    font-size:?
    font-weight: bold;
    display:block;
    其他CSS属性:?
}

2. 解决层叠冲突

这一步就开始要解决冲突了，即对样式表中有冲突的声明使用层叠规则，确定css属性值

那么层叠规则又是什么呢？

重要性

特殊性

源次序

首先这个重要性的意思就是：

 !important > 用户样式表 > 浏览器默认样式表

这里我们可以看到，color属性是有冲突的。由于样式表中没有!important 标明，所以我们继续往后看（如果哪一个地方标明了，则直接就能确定该值了，但如果有多个地方标明，则还需要进行后面的比较），由于用户样式表 > 浏览器默认样式表,所以浏览器默认样式表中的样式就被淘汰了。然后就进入到了权重的计算，

这里我们可以直接看出

div h1.red {
    font-size:3em;
    font-size:30px;
}

这个选择器的权重是最高的，但是这里写了两个font-size，那么就需要比较源次序了，这里的意思就是后面的会覆盖前面的，那么最终的值就确定为30px

这一步，我们最后确定了如下css样式的属性值：

{
    color:red;
    background-color: ?
    text-align: ?
    font-size:30px;
    font-weight:bold;
    display:block;
    其他CSS属性：...
}

3. 继承

到了这一步尽管确定了一些没有冲突的，有冲突的属性值，但是还是有一些属性的值没有确定，因为有一些属性用户样式表和浏览器默认样式表中都没有进行声明。所以这一步，对仍然没有值的属性，若可以继承，则继承父元素的值

css可以继承的属性：

1.字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：
caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表属性：
list-style-type、list-style-image、list-style-position、list-style

6、光标属性：cursor

根据以上信息可以确定，text-algin属性是可以继承的，假设h1标签的父元素的text-algin的值为center，则h1的text-algin的值也为center。

至此，我们最后确定了如下css样式的属性值：

{
    color:red;
    background-color: ?
    text-align: center;
    font-size:30px;
    font-weight:bold;
    display:block;
    其他CSS属性：...
}

4. 默认值

到了这一步，对仍然没有值的属性，使用默认值

background-color的默认值为transparent，至此我们就将所有的属性值确定了下来。

{
    color:red;
    background-color: transparent;
    text-align: center;
    font-size:30px;
    font-weight:bold;
    display:block;
    其他CSS属性：...
}

两个特殊的css属性

最后，说一下两个特殊的css属性：

inherit。强制（手动）继承，将父元素的值取出应用到该元素（不管这个属性值是否可以继承）。
initial。初始值，将该元素的属性变为默认值。