Lang's blog

# initial、revert 和 unset 区别

CSS 中 initial、revert 和 unset 是用于重置或修改属性值的全局关键字，它们的核心区别如下：

# 1. initial‌

  • 功能 ‌：将 CSS 属性重置为规范定义的 ‌ 初始值 ‌（默认值），忽略继承和用户代理样式。

  • 特点 ‌：

    • 强制属性值为规范初始值，而非浏览器默认值。
    • 例如：display: initial 会设为 inline（规范初始值），而非浏览器默认的 block（如 <div>）。

  • 适用场景 ‌：需要完全清除继承或自定义样式，强制回归 CSS 标准定义的最基础值。

# 2. revert‌

  • 功能 ‌：将属性值还原到 ‌ 用户代理的默认样式 ‌（浏览器默认样式），或继承父级的值。
  • 特点 ‌：
    • 若属性在用户代理样式表中有定义（如 <h1> 的 font-size），则恢复为浏览器默认值。
    • 若无用户代理定义，则行为类似 inherit（继承父级值）。
  • 适用场景 ‌：需要恢复浏览器原生默认样式，或匹配父级继承链的上下文样式。

# 3. unset‌

  • 功能 ‌：根据属性的继承性自动判断重置方式：
    • 若属性 ‌ 可继承 ‌（如 color），等同于 inherit（继承父级值）。
    • 若属性 ‌ 不可继承 ‌（如 background），等同于 initial（重置为规范初始值）。
  • 特点 ‌：智能区分继承与非继承属性，提供灵活的重置逻辑。
  • 适用场景 ‌：需要根据属性的继承性自动选择重置策略时。 对比示例 ‌
/* 初始状态：父元素 font-size: 20px */
.parent {
  font-size: 20px;
}

.child {
  font-size: 30px; /* 自定义值 */
}

/* 应用不同关键字 */
.child-1 {
  font-size: initial;
} /* 结果：font-size 设为规范初始值（通常 16px） */
.child-2 {
  font-size: revert;
} /* 结果：恢复为浏览器默认值（如 `<div>` 默认 16px） */
.child-3 {
  font-size: unset;
} /* 结果：因 font-size 不可继承，等同 initial（16px） */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意事项 ‌：

  • 浏览器兼容性：revert 在旧版本浏览器（如 IE）中不支持，需谨慎使用。
  • 实际效果差异：revert 的返回值受用户代理样式表影响，不同浏览器可能表现不同。

# opacity，transparent，rgba 区别

三者共同点是都和透明有关
介绍

  • opacity是一个 CSS3 的属性，用于设置元素的透明度。取值范围是 0.0（完全透明）到 1.0（完全不透明）。
  • transparent是颜色的一种，用于指定完全透明的颜色。
  • rgba是一个属性值，用于设置颜色的红色、绿色、蓝色和透明度值。其中"a"代表alpha通道，即透明度，取值 0~1 之间。0 表示完全透明的像素，1 表示完全不透明的像素。

区别

  • opacity是作为一个完整属性出现的。transparent和rgba都是作为属性值出现的。
  • opacity会影响元素及其所有子元素的透明度；transparent和alpha是对元素的某个属性起作用的，任何需要设置颜色的地方都可以根据情况使用transparent或rgba，比如背景、边框、字体等。
  • 如果一个元素未设置opacity属性，那么它会从它的父元素继承 opacity 属性的值。而transparent和rgba不存在继承。

# 伪类选择器

所有伪类选择器 (opens new window)

# 粘性定位

一个元素设置为position: sticky粘性定位后，它的位置取决于以下两个：

  • 包含块
  • 最近可能滚动祖先 （只要 overflow 不是 visible 的祖先元素）

MDN postion (opens new window)

← Q&A →