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
-
inherit:适用于 “可继承的属性”
-
initial:适用于 “不可继承的属性”
-
unset:重置成CSS的默认样式(Level1)
-可继承的属性——unset等同于inherit
-不可继承的属性——unset等同于initial -
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;
}