color: initial 总是取 css 规范定义的初始值（black），与父元素颜色或浏览器默认表现无关；inherit 强制继承父元素计算后的 color 值；unset 对 color（可继承属性）等效于 inherit。
color: initial 为什么不是恢复成父级颜色？
因为 initial 永远取 CSS 规范定义的初始值，和父元素、浏览器默认表现都无关。比如 color 的规范初始值是 black，哪怕父元素设了 color: green，color: initial 仍会变成黑色。
想继承父级颜色，必须用 inherit；想“智能判断”——可继承就继承、不可继承就清空，则用 unset。
-
color: initial→ 总是 black（规范值） -
color: inherit→ 取父元素计算后的 color 值（哪怕父级没显式声明，也会沿继承链往上找） -
color: unset→ 等效于inherit（因为 color 是可继承属性）
border: inherit 能继承什么？
border 默认不可继承，但 inherit 强制它“复制”父元素计算后的完整声明，不只是颜色或宽度。
例如父元素有 border: 2px solid #333，子元素写 border: inherit 就会得到完全相同的边框样式；而 border-color: inherit 只继承颜色，其他部分保持原样。
- 慎用
margin: inherit或padding: inherit——它们本不可继承，强行用只会继承父元素的值（如果父元素恰好设了），但语义混乱、难以维护 -
background: inherit会继承渐变或图片，但若子元素尺寸不同，可能拉伸或重复异常 - 对
display、position这类布局属性，inherit很少有用，通常应直接设置明确值
all: initial 和 all: unset 哪个更危险？
all: initial 会让所有属性回归规范初始值：包括 display: inline、visibility: visible、font-size: medium，但也会让 color 变黑、cursor 变 auto，极易破坏交互。
all: unset 更“温和”些：可继承属性（如 color、font-family）保留继承链，不可继承属性（如 margin、width）才重置为 initial。但它仍会切断 direction 和 unicode-bidi 以外的所有继承，导致文字方向、表单控件等意外失效。
- 两者都不该用在常规容器上；只适合极简浮层、图标按钮、临时覆盖层等隔离上下文场景
- 若只需清几个属性，宁可显式写：
margin: 0; padding: 0; font-size: unset; -
all: revert看似理想（还原 UA 样式），但兼容性差（Safari 旧版行为不一致），且 UA 默认值本身跨浏览器不统一
flex: initial 在 Flex 容器里为什么容易出错？
flex: initial 展开后等价于 flex: 0 1 auto，其中 flex-grow: 0 会导致子项不占剩余空间，常被误以为“重置回默认”，实则改变了布局行为。
更糟的是，在 Grid 容器中对子项用 grid-column: initial，会触发 auto，但某些旧引擎解析异常，造成列定位丢失。
- 不要对布局相关简写属性（
flex、grid-area、background）依赖initial或unset——它们的初始值是none或auto，无法还原你预期的“正常状态” - 需要真正“清空” flex 行为时，显式写
flex: 0 0 auto或重置为display: block更可控 - 自定义属性（
--my-var）不支持initial，写--my-var: initial直接报语法错误
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
