1. 先看计算的结果
元素会有所有的css属性,这里查看all就是计算后的结果:
2. 计算过程:
- 确定用户声明的规则
- 解决冲突 (一个元素设置了多个规则,要选哪个)
① 比较样式来源的重要性(开发者样式 > 用户样式 > 浏览器默认样式)
② 比较选择器权重
③ 比较声明的顺序(后面的优先) - 可以继承的属性就继承
- 剩下的使用默认值
3. 特殊的属性值
- inherit —— 继承
- initial —— 把当前css属性的计算值还原成【css语法中规定的初始值】
- unset —— 不设置。对于可继承的属性相当于inherit,否则相当于initial。一般用
all: unset
来整体重置样式 - revert —— 将当前元素的样式还原成【浏览器内置的样式】
下图:body 的 margin分别设置为 unset 和 revert 的区别:
margin不可继承,设置为unset相当于initial,即还原为css语法中的初始值 | 设置为revert,将margin还原成浏览器内置的body margin 8px |
---|---|