html元素的css属性值计算过程简述

一个页面中渲染出来的每个html元素都具有成千上百个css属性值，并且每个css属性都必须是有值的，即使可能有的来自开发者在css文件中的定义，有的是浏览器默认样式，而有的又是继承其父级元素。下面简单讲一下属性值的计算过程：

css属性计算过程

首先要说一下，css的渲染式逐个进行的，并非整体渲染，所以要根据html的树形结构依次展开，虽然这一点和本文的内容关联性不大，这里还是赘述一下，进行了解。
那么，我们就阐述每一个元素渲染过程中的属性计算过程：

第一步：确定声明值

查看css样式表中没有冲突的声明，作为css的属性值。

本文中以下例为示范：

<style>
		div{
			text-align: center;
		}
        h1{
        	background-color: seagreen;
            color: blue;
            font-size: 20px;
        }
        h1.red{
            color: red;
        }
</style>
<div>
	<h1 class='red'>
       	 一级标题
	</h1>
</div>

上述的一段简单代码中，开发者定义了部分h1标签的样式，但实际上h1元素被定义的样式不止只有开发者定义的样式，还会有h1元素自带的浏览器默认样式如下：

<style>
<!--  浏览器默认样式  -->
	h1{
		display: block;
		font-size: 2em;
		font-weight: blod;
	}
</style>

在以上的一系列样式表中，可以看出h1元素的background-color、display、font-weight属性是没有冲突，故这三个属性声明值被确定，而h1其他属性在这一阶段的值仍是？。

第二步：层叠冲突

在这一步中，对样式表内有冲突的声明使用层叠规则，确定CSS属性值。

<style>
		div{
			text-align: center;
		}
        h1{
        	background-color: seagreen;
            color: blue;
            font-size: 20px;
        }
        h1.red{
            color: red;
        }
</style>
<div>
	<h1 class='red'>
       	 一级标题
	</h1>
</div>

<style>
<!--  浏览器默认样式  -->
	h1{
		display: block;
		font-size: 2em;
		font-weight: blod;
	}
</style>

在示例中，h1的部分属性声明中存在冲突，这里就需要通过比较重要性、特殊性以及源次序的规则（由于比较的规则内容与本文主题无关，这里不做介绍），将最终的属性值确定下来，经对比，样式表权重排序为：h1.red>h1>浏览器默认样式表，故由高到低确定了h1的color、font-size属性。
此时，h1元素除了第一、二步中的个别属性值已确定以为，其余值还都是？。
注意：如果这里有属性值为inherit，那么就根据父级元素的这一属性确定属性值。（继承行为）

第三步：使用继承

对仍然没有值的属性，若可以继承，则继承父元素的值。

<style>
		div{
			text-align: center;
		}
        h1{
        	background-color: seagreen;
            color: blue;
            font-size: 20px;
        }
        h1.red{
            color: red;
        }
</style>
<div>
	<h1 class='red'>
       	 一级标题
	</h1>
</div>

<style>
<!--  浏览器默认样式  -->
	h1{
		display: block;
		font-size: 2em;
		font-weight: blod;
	}
</style>

示例中，h1的 text-align 属性值会继承父元素div的值。这里顺便提一下，只有部分属性可以实现继承，例如和文本有关的属性。

第四步：使用默认值

对仍然没有值的属性，使用默认值。以确保每一个css最终都有值，这样才可以将一个元素渲染在页面上。

元素的很多属性值其实在一、二、三步中其实都没有被确定，故最终大多数元素还是在这一步中被确定。下图为例：

到这里，一个元素的属性值计算过程就结束了。

以上内容纯属个人学习的过程，仍处于学习阶段，有不足之处还请指出交流，谢谢！