欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-03 14:16:27
...

属性值的计算过程

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

渲染每一个元素的前提条件:该元素的所有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>

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

相关标签: CSS学习之路