让你彻底搞清浏览器的的渲染——CSS属性值的计算过程

属性值的计算过程

定义：一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程，叫做属性值计算过程

渲染每一个元素的前提条件：该元素的所有CSS属性必须有值

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

过程简介：

无属性值->确定声明值->层叠冲突->使用继承->使用默认值->每个属性都有值

1. 确定声明值：参考样式表中没有冲突的声明，直接作为CSS属性值。
2. 层叠冲突：对样式表中有冲突的声明使用层叠规则，确定CSS属性值。
3. 使用继承：对仍然没有值的属性，若可以继承，则继承父元素。
4. 对仍然没有值的属性，使用默认值

关于a元素的颜色继承问题

<style>
div{
    color:red;
}
</style>

<div>
<a href="">超链接</a>
<p>p</p>
</div>

你会发现，a元素并没有继承父元素的颜色，而是原色，这是因为在浏览器的默认样式表中已经有了color的属性值，所以color属性在确定声明值时已经确定个属性值。

特殊的两个CSS取值：

• inherited:手动（强制）继承，将父元素的值取出应用到该元素。
• initial:初始值，将该元素设置为默认值。
  a元素颜色继承解决办法：

<style>
a{
    color:inherited;/*强制继承*/
}/*此时根据层叠冲突可知该样式被浏览器选中，color会从父元素中继承属性值，相当于提前继承*/
</style>

initial的使用：

<style>
div{
    background:lightblue;/*亮蓝色*/
}
.mydiv{
    background:initial;/*透明色*/
}
</style>

<div class="mydiv">

</div>

此时背景色就会变为浏览器原始的透明色。