korey的前端笔记CSS 属性值的计算过程
该过程在页面渲染流程中的样式计算（Recalculate Style）环节执行
某个元素从所有 css 属性都没有值，到所有 css 属性都有值的过程，就是 CSS 属性值的计算过程。
Cascading 级联过程分为：
- 确定声明值（可操作）
- 层叠（可操作）
- 继承
- 使用默认值
以上步骤顺序不能交换。并且在其中某一步完成 css 属性确认后，立即跳出后续的过程。
Cascading 过程
确定声明值
浏览器里有两张样式表：作者样式表（即自己写的样式）和默认样式表（即用户代理样式表 User agent style sheet），找到没有冲突的样式，直接作为计算后的样式。
层叠
对于有冲突的样式，进行层叠。根据以下规则比较：
比较重要性
- 带有 important 的作者样式
- 带有 important 的默认样式
- 作者样式
- 默认样式
比较特殊性（优先级、权重）MDN，对每一类分别计数，从高位到低位按位比较，值相同则比较下一位。
style id 属性 元素 内联：1 非内联：0 id 选择器的数量 属性、类、伪类选择器的数量 元素、伪元素的数量 vscode 会显示特殊性。
比较源次序
源码中靠后的覆盖靠前的。
继承
继承是继承的父元素的计算样式。继承前提条件：对依然没有值的属性，若可以继承，则使用继承。
哪些可以继承？跟文字相关的属性，如 line-hight,color 等。其他如 width、height 则不行，具体查阅 MDN
使用默认值
当以上步骤均未设置 css 属性值时，则使用默认值，默认值在 chrome-计算样式里置灰（浏览器默认样式表未置灰且可点击）
接下来将将所有值（auto、em、vh、small 等）绝对值化与格式化（相对位置 flex 等），然后在实际绘制之前根据浏览器环境（如浏览器引擎、媒体类型、设备像素密度或操作系统）进行一些调整。一些常见的调整是将浮点数四舍五入为整数或根据可用字体调整字体的大小。
关键属性
inherit
主动继承。指复制父元素该属性的值。与上述第三步“继承”毫无关系。
initial
将该属性的值设为 CSS 规范中定义的默认值（上述第四步的默认值），应用场景为不使用浏览器默认样式表、不使用用户样式表、不使用继承。与上述第四步“设为默认值”毫无关系。
div {
display: initial; /* 设置为 'inline'，因为 'display' 的初始值是 'inline' */
}unset
复原设置，重置为其自然状态。即将上述前两步的设置清空复原。只走第三步、第四步来得到属性值（走继承和默认值）。
div {
color: unset; /* 设置为 'inherit' */
display: unset; /* 设置为 'inline'，因为 'display' 的初始值是 'inline' */
}key 为 all 能同时设置所有属性。
revert
revert它将属性重置为用户代理设置值(浏览器默认值)、用户设置值、其继承值（如果它是可继承的）或初始值（上述按顺序）。
/* 恢复到用户代理样式表中的值，如果没有，则回退到初始值 */
div {
color: revert;
}此关键字从级联中删除所有已被覆盖的样式，直到达到要回滚到的样式。这意味着它会撤销所有级联样式的影响，并恢复到用户表或用户代理样式表（即浏览器默认样式）中定义的样式。如果用户代理样式表中没有为该属性定义样式，或者该属性不是由用户代理样式表设置的，则 revert 会将属性值重置为其继承值（如果它是可继承的）或初始值。
优先级：用户代理样式表 < 用户样式表 < 作者样式表 ，从右往左恢复。
appearance: none; 专门用于移除元素的默认浏览器样式，特别是表单控件的样式。