当前位置：首页 > news >正文

全面解析：HTML页面的加载全过程(四)--浏览器渲染之样式计算

news 2025/9/19 11:03:10

主线程遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style。

通过前面生成的DOM 树和 CSSOM 树，遍历 DOM 树，为每一个 DOM 节点，计算它的所有 CSS 属性，最后会得到一棵带有样式的 DOM 树–也叫“渲染树 Render Tree”

在这里插入图片描述

可在控制台查看样式计算

在这里插入图片描述

属性值的计算过程

1、确定声明值

声明值就是 “自己所书写的 CSS 样式+浏览器内置的样式表” 相加得到全部的声明值，并且将部分值进行转换

如：color: red;转换为`color: rgb(255, 0, 0);

font-size: 2em;转换为font-size: 14px;`。

2、层叠冲突

在确定声明值时，声明的样式规则发生了冲突，解决冲突，下面这三个步骤：

（一）比较源的重要性

样式有三种来源：

1. 浏览器默认样式（用户代理样式）：浏览器会有一个基本的样式表来给任何网页设置默认样式
2. 网页设计者定义的样式（页面作者样式）：即外联样式、内部样式、style行内样式等
3. 控制台调试样式（用户样式）：浏览器的用户在开发者模式里使用自定义样式表定制使用体验

对应的重要性顺序依次为：网页设计者定义的样式 > 用户样式 > 浏览器默认样式

（二）比较优先级–权重

如果在同一源中出现了样式声明冲突，则比较其优先级。

权重的等级

!important，权重最大，会覆盖页面内任何位置定义的元素样式。
内联样式，写在标签中的，权重为1000
ID选择器，权重为0100
类、伪类、属性选择器，权重为0010
标签、伪元素选择器，权重为0001
通配符、子选择器、相邻选择器等，权重为0000

我手写了计算权重的方法：
在这里插入图片描述

案例1

<ul id="nav" class="nav"><li class="active" id="bb"><a href=""></a></li>
</ul>ul#nav li.active a   权值为（0,1,1,3）；`ul li.active a` 权值为（0,0,1,3）；---一个伪类，三个标签`ul.nav li.active a` 的权值为（0,0,2,3）；`
如是行内样式（内联样式），权值为（1,0,0,0） ；某项 CSS 属性后面带 `!important` 时，权值最大。

案例2

都是设置文字颜色，应该以哪个为主？

<!DOCTYPE html>
<html lang="en">
<head>	<style>/* 权重 0,0,1,1 */.nav a {color: red;}/*  权重 0,0,1,0  */.blog {color: yellow;}/*  权重 0,0,2,0 */.nav .blog {color: blue;}</style>
</head>
<body><div class="nav"><a href="" class="blog">java</a><a href="">python</a><a href="">css</a><a href="">ruby</a></div>
</body>
</html>

分析：

0011>0010 以红色为主

0020>0011 以蓝色为主

在这里插入图片描述

案例3

<!DOCTYPE html>
<html lang="en">
<head><style>a{color: yellow;} /*权重：0,0,0,1*/div a{color: green;} /*权重：0,0,0,2*/.demo a{color: black;} /*权重：0,0,1,1*/.demo input[type="text"]{color: blue;} /*权重：0,0,2,1*/.demo *[type="text"]{color: grey;} /*权重：0,0,2,0*/#d1 a{color: orange;} /*权重：0,1,0,1*/div#d1 a{color: red;} /*权重：0,1,0,2*/</style>
</head>
<body><a href="">第一</a> <div class="demo"><input type="text" value="第二" /><a href="">第三</a></div><div id="d1"><a href="">第四</a></div>
</body>
</html>

分析：

#d1 a和div#d1 a 设置相同的属性，但0101<0102 以红色为主

在这里插入图片描述

（三）比较次序----重要：如权重值相同，“就近原则”

后声明的样式会覆盖先声明的样式。

p{/* 会被覆盖 */color: yellow;
}p{    color: green;
}

3、使用继承

对于每一个 DOM 节点，都会去计算它的所有 CSS 属性。

对于未声明的属性，并不是直接使用默认值，而是使用继承值。

<div><p>java</p>
</div>
div{color: red;
}

这里<p>标签会继承来自<div>的color: red样式。

继承原则：

就近原则，谁近就继承谁的，与权重无关。
大部分字体相关的属性都是可继承的

4、使用默认值

如果最后仍不能确定属性值，则使用浏览器默认值。

在这里插入图片描述

属性值的计算过程

1、确定声明值

2、层叠冲突

（一）比较源的重要性

（二）比较优先级–权重

案例1

（三）比较次序----重要：如权重值相同，“就近原则”

3、使用继承

4、使用默认值

相关文章：