css样式计算

1. 先看计算的结果

元素会有所有的css属性，这里查看all就是计算后的结果：

2. 计算过程：

1. 确定用户声明的规则
2. 解决冲突 （一个元素设置了多个规则，要选哪个）
   ① 比较样式来源的重要性（开发者样式 > 用户样式 > 浏览器默认样式）
   ② 比较选择器权重
   ③ 比较声明的顺序（后面的优先）
3. 可以继承的属性就继承
4. 剩下的使用默认值

3. 特殊的属性值

• inherit —— 继承
• initial —— 把当前css属性的计算值还原成【css语法中规定的初始值】
• unset —— 不设置。对于可继承的属性相当于inherit，否则相当于initial。一般用all: unset来整体重置样式
• revert —— 将当前元素的样式还原成【浏览器内置的样式】

下图：body 的 margin分别设置为 unset 和 revert 的区别：

margin不可继承，设置为unset相当于initial，即还原为css语法中的初始值	设置为revert，将margin还原成浏览器内置的body margin 8px
unset.png	revert.png