inherit继承父元素声明值，initial回退规范初始值，unset按可继承性智能选择；三者语义不同，误用会导致样式或交互异常。
inherit、initial、unset 三者根本不是同一类操作：inherit 是“向上要值”，initial 是“回出厂设置”，unset 是“看情况决定要值还是清空”——选错一个，颜色、布局、交互都可能意外崩掉。
inherit 强制继承声明值，不是计算值
它拿的是父元素 color: #333 或 color: var(--text) 这种写死的声明，不是经过 rgba() 变换后的真实颜色，也不是 CSS 变量展开后的结果。常见错误是以为 svg { fill: inherit; } 能拿到父元素最终渲染出的深灰色，实际只拿到变量名或原始色值。
- 适用场景：
svg { fill: inherit; }让图标随文字变色；::before { color: inherit; }复用父级文字样式 - 注意 border、background 这类默认不继承的属性，加
inherit才会生效，但仍是继承父元素的声明（比如background: linear-gradient(...)） - IE8+ 支持，IE7 及更早版本不支持
initial 回退到 CSS 规范定义的初始值
display: initial 是 inline，不是 block；box-sizing: initial 是 content-box，不是 border-box；font-family: initial 是 serif，不是系统默认字体。它完全无视浏览器 UA 样式表和你写的任何全局重置。
- 常见翻车点：
button { all: initial; }后按钮变 inline、无 padding、无 cursor:pointer，点击区域消失 - 对
margin、padding等属性，initial是0，但对line-height是normal，值因属性而异 - 不能靠它“恢复浏览器默认样式”，那是
revert的事
unset 智能判断：可继承就 inherit，否则 initial
它像一个带逻辑的开关：color: unset → 父元素有 color 声明就继承，没有就用 initial（黑色）；width: unset → width 不可继承，直接走 initial（auto）。
- 比
all: initial安全得多，适合组件 reset：button { all: unset; display: inline-block; padding: 4px 8px; } - 但依然危险：未显式设
box-sizing时，默认content-box，后续padding会撑大尺寸 - 慎用于
cursor、user-select、touch-action等影响交互的属性——unset可能让它们退回initial，导致点击无反馈或无法选中文本
真正难的不是记清三者定义，而是意识到 all: unset 会同时重置 contain、direction、unicode-bidi 这些冷门但关键的属性——RTL 文本、动画性能、可访问性都可能悄无声息地出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
