让你彻底搞清浏览器的的渲染——CSS属性值的计算过程
程序员文章站
2022-07-03 14:16:27
...
属性值的计算过程
定义:一个元素,从所有属性都没有值,到所有属性都有值,这个计算过程,叫做属性值计算过程
渲染每一个元素的前提条件:该元素的所有CSS属性必须有值
一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行
过程简介:
无属性值->确定声明值->层叠冲突->使用继承->使用默认值->每个属性都有值
- 确定声明值:参考样式表中没有冲突的声明,直接作为CSS属性值。
- 层叠冲突:对样式表中有冲突的声明使用层叠规则,确定CSS属性值。
- 使用继承:对仍然没有值的属性,若可以继承,则继承父元素。
- 对仍然没有值的属性,使用默认值
关于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>
此时背景色就会变为浏览器原始的透明色。