inherit强制继承父级计算值，initial强制使用规范初始值；前者用于绕过继承限制（如border），后者用于回归规范基准（如border: initial为none），二者语义相反不可互换。
inherit 强制“抄父级”，initial 强制“回出厂”——两者语义完全相反，不能互换，用错会导致样式意外重置或失控。
什么时候该用 inherit？
当你明确想让子元素“复刻父元素当前计算出的值”，尤其针对默认不可继承的属性（比如 border、background-color、font-weight）时，inherit 是唯一能绕过继承限制的手段。
- 常见错误：给
input写color: inherit看似多余，但其实很必要——因为input默认不继承color（部分浏览器有差异），显式写上才能确保和父容器文字颜色一致 - 实用场景：按钮组件内部图标想自动匹配按钮背景色，可写
svg { background-color: inherit; } - 注意：继承始终来自 DOM 树中的直接父元素，不是视觉上的“上层容器”；若中间有 display: none 元素，不影响继承链
什么时候该用 initial？
initial 不看父级，只认 CSS 规范定义的“初始值”（initial value），和浏览器默认样式（user agent stylesheet）无关。它常用于彻底剥离自定义影响，回归规范基准。
- 典型误用：以为
margin: initial会让段落恢复浏览器默认的1em上下边距 —— 错！margin的初始值是0，所以实际会清空所有外边距 - 安全用法：重置某个易污染的属性，如
text-align: initial可强制取消所有继承/全局设置的影响，回到规范定义的start（LTR 下为 left） - 兼容性提醒：
initial在 IE 全系列中完全不支持，需搭配 fallback 或避免在旧项目中使用
inherit 和 initial 的关键行为对比
同一段 HTML，不同关键字效果截然不同：
立即学习“前端免费学习笔记（深入）”；
.parent {
color: #f00;
border: 2px solid #00f;
width: 300px;
}
.child-inherit {
color: inherit; /* → #f00 */
border: inherit; /* → 2px solid #00f（强制继承，否则 border 默认不继承）*/
width: inherit; /* → 300px（width 默认不继承，但 inherit 强制取父值）*/
}
.child-initial {
color: initial; /* → 非黑色！规范初始值是 canvas-text（通常渲染为黑色，但非绝对）*/
border: initial; /* → 边框消失（border 的初始值是 none）*/
width: initial; /* → auto（width 初始值是 auto，不是 0）*/
}- 重点陷阱：
color: initial≠color: black，它取决于用户代理对canvas-text的映射，暗色模式下可能变浅灰 - 更稳妥的选择：对可继承属性，优先考虑
unset（它在可继承属性上等价于inherit，不可继承时才退为initial）
真正容易被忽略的是：很多开发者把 initial 当作“浏览器默认样式”，但它其实是 W3C 规范里的抽象初始值，和你 DevTools 里看到的 user agent 样式（比如 p { margin: 1em; }）毫无关系——要还原那个，得用 revert，不是 initial。
