initial将属性设为CSS规范定义的初始值，而非浏览器默认值；例如display初始值为inline，color初始值为inherit，与浏览器实际渲染值可能不同。
initial 关键字不是“重置为浏览器默认值”
这是最常见的误解。initial 不是把某个 CSS 属性设回当前浏览器的默认样式（比如 font-size 在 <p></p> 里是 16px），而是设为该属性在 CSS 规范中定义的**初始值（initial value）**——这个值可能和浏览器实际渲染的默认值完全无关。
例如：display 的初始值是 inline，但 <div> 的浏览器默认 <code>display 是 block；color 的初始值是 inherit（注意：不是 black），而浏览器通常让根元素用 black，子元素继承它——但一旦你显式写了 color: initial，它就变成 inherit，不是“恢复成黑色”。
哪些场景下用 initial 真有用
它真正适合的，是想**切断当前作用域的显式声明影响，退回规范定义的起点**，尤其在组件库、CSS-in-JS 或需要强隔离样式的上下文中：
- 清除第三方组件上硬编码的
margin（其初始值是0），避免干扰布局 - 让某个按钮的
cursor回到规范初始值auto，而不是被父级或框架强制设为pointer - 在
@keyframes动画中，明确某帧要“取消当前所有样式干预”，用initial比写一堆unset或具体值更简洁
但要注意：initial 对 background、border 这类简写属性效果有限——它的初始值是 none，不会清空颜色、宽度等子属性已有的计算值。
立即学习“前端免费学习笔记（深入）”；
initial vs unset vs revert 的关键区别
三者行为完全不同，选错会出意料之外的结果：
-
initial：总是取 CSS 规范里写的初始值（如opacity: 1、visibility: visible） -
unset：对继承属性 =inherit，对非继承属性 =initial（比如color: unset等价于color: inherit，但display: unset=display: initial即inline） -
revert：退回到**浏览器 UA 样式表**的值（也就是你看到的“默认表现”），这才是最接近“恢复浏览器本来样子”的关键字——但它不被 IE 支持，且在某些旧版 Safari 中行为不稳定
所以，如果你真想“让一个 <h2></h2> 的 margin-top 变回浏览器默认的 0.83em”，别用 initial（它的初始值是 0），改用 revert；如果兼容性要求高，就得手动查 UA 默认值并写死。
initial 的兼容性与调试陷阱
它从 Chrome 37 / Firefox 27 / Safari 9 就支持了，现代项目基本可放心用。但有两个坑必须留意：
- 它不能触发 CSS 自定义属性（
--my-var）的“重置”——--my-var: initial是非法语法，自定义属性没有初始值概念，只能用var(--my-var, fallback)或 JS 清除 - 在 Flex/Grid 容器内对子项使用
initial可能导致布局崩溃：比如flex: initial展开后是0 1 auto，但若父容器没设width，子项可能缩成 0 宽——这不是 bug，是规范定义的行为 - DevTools 里看到某属性被标记为
initial，不代表它“生效了”：得点开该属性，确认计算值（Computed）是否真变成了那个初始值；有时层叠优先级更高，initial会被覆盖却不易察觉
真正难的从来不是写 initial，而是搞清你到底想“回到哪一层的默认”——是规范、是 UA、还是你自己上一次设置的值。选错了关键字，后面调半天 margin 都不知道为什么不对。
