突然发现自己对于css的样式规则一直都没有完全明白，今天写文好好整明白
浏览器渲染原理
1. 浏览器向服务器请求html文件
2. html文件返回浏览器
3. 浏览器解读html文件
<!DOCTYPE html>//告诉浏览器，这是html5文件// html树<html lang="en">//语言<head> <meta charset="UTF-8"> //这个标签定义了 HTML 文档的字符编码。<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="viewport" content="width=device-width, initial-scale=1.0">// 这个标签控制了网页在移动设备上的布局和缩放行为。// width=device-width 布局：指定了页面的宽度应该与设备的屏幕宽度相同，这样页面就不会在移动设备上显示过宽或需要用户水平滚动。// initial-scale=1.0 缩放：设置了页面的初始缩放级别为 100%，即不缩放。<title>Document</title><link rel="stylesheet" href="./style.css">//请求css文件<script src="./index.js"></script>//请求js文件</head><body> </body></html>
-
按html5样式准备解析
-
开始构建DOM树[可以部分解析]
html --> head -->link……-->请求css文件
在请求css文件的同时，遇见<script>，请求js文件，返回js,css文件
- 构建CSSOM树【不可以部分解析】
-->继续解析html【js解析阻塞了html解析，所以一般js作为body最后一个儿子元素】 -->执行js -->DOM完成构建-->
4. 构建渲染树 -->
rules
p.s.只看这一个元素自己，先不要看它的父元素
1. 样式声明：自定义的样式或者浏览器默认样式里有的不冲突的属性
2. 样式冲突的？权重计算
-
比较重要性 /默认还是自定义，自定义高
-
比较特殊性 /自定义当中，计算选择器权重值
-
比较源次序 /权重一样后来者居上，覆盖
- 也不冲突，就是单纯啥都没有，如果有可继承属性，就去找父元素看看可不可以继承
- 继承也不行，就赋默认的属性
一般背景颜色默认值是rab(0,0,0,0)透明色，你看见不是透明的原因是，它透明，展示的是父辈的背景颜色
5. 节点布局【以盒子模型为单元】 -->
6. 页面渲染【以像素的形式】-->
- 回流
当元素属性发生改变且影响布局时（盒子大小变化，包括五要素和字体大小，粗细……），产生回流，相当于 回到节点布局，再次节点布局，页面渲染。
- 重绘
当元素属性发生改变且不影响布局时（背景颜色、透明度、字体样式等），产生重绘，相当于不用再次节点布局，直接回到页面渲染，重新渲染页面，动态更新内容。
文章素材来自bilibili，bilibili
