CSS是如何工作的

Level1：CSS属性的默认样式—— 给所有 CSS 属性创建默认值
eg:（默认属性）

	position:static;
	top:auto;
	left:auto;
	right:auto;
	bottom:auto

可查看CSS属性的初始值：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#specifications

CSS属性的继承行为：

• 文本类型：font-family、font-size、color、text-align、letter-spacing、text-decoration
• 排版类型：CSS排版属性

Level2：User-Agent-Stylesheet—— 给某些 HTML 元素添加特定的默认样式。
eg:display的初始值是inline，但div默认样式是display:block，是User-Agent-Stylesheet的原因

注：在审查元素时，看不到默认样式，可以看到User-Agent-Stylesheet

Level3.Normalize CSS—— 保持不同浏览器中的 “User-Agent-Stylesheet”（Level 2）的效果一致的样式。

Level4.CSS Reset—— 覆盖 “User-Agent-Stylesheet”（Level2）中所有的默认样式。

Part5.CSS样式重置关键字
css的重置关键字：initial、inherit、unset、revert

1. inherit：适用于 “可继承的属性”

2. initial：适用于 “不可继承的属性”

3. unset：重置成CSS的默认样式(Level1)

   -可继承的属性——unset等同于inherit
   -不可继承的属性——unset等同于initial

4. revert：重置成User-Agent-Stylesheet(Level2)的样式

   -可继承的属性—— 把 CSS 属性的值设为 inherit
   -不可继承的属性，判断 “User-Agent-Stylesheet”（Level-2）中是否存在该属性的样式
   情况①：如果存在，则直接使用 “User-Agent-Stylesheet” 中对应的样式
   情况②：反之，把 CSS 属性的值设为 initial

定义标准样式：
可以把可继承的属性设为initial，重置属性值
可以把没有继承属性设为inherit，其可继承其属性

Part6."all"属性
all属性会一次性重置所有属性，避免一个个去重置
eg：all:unset / all:revert

/* 移除浏览器默认样式表（“User-Agent-Stylesheet”）中除了 ‘display’ 之外的所有样式 */
* {
  all: unset;
  display: revert;
}
/* 给 box-sizing 设置一个普遍使用的值 */
*, *::before, *::after{
  box-sizing: border-box;
}