all: unset将可继承属性设为inherit、不可继承属性设为initial，不重置UA默认样式、direction、unicode-bidi及自定义属性；适合组件样式隔离，但需手动补全display、box-sizing等关键声明。
all: unset 会清空哪些样式？
all: unset 并不是“清空所有 CSS 属性”，而是将当前元素上**所有可继承属性设为 inherit，所有不可继承属性设为 initial**。这意味着：
– 字体、颜色、行高这类可继承属性，会从父元素继承（不是清掉，是显式继承）；
– display、margin、padding、border 等不可继承属性，则重置为浏览器默认的 initial 值（例如 display: inline、margin: 0）。
它不触碰 direction、unicode-bidi 这类极少用的属性，也不影响自定义属性（--my-var），更不会重置伪元素或动画状态。
什么时候该用 all: unset，而不是 all: initial 或 all: revert？
选 all: unset 的典型场景是：你希望一个组件（比如 <button></button> 或自定义卡片）彻底脱离宿主页面的样式污染，但又不想让文字突然变小/变色——即保留语义继承，只剥离盒模型和布局干扰。
-
all: initial会让文字变成浏览器默认字号/颜色（通常很小、黑灰），破坏可读性 -
all: revert会回退到浏览器 UA 样式表的值，但行为不稳定（Chrome 和 Firefox 对某些属性的 UA 值不同） -
all: unset是目前最可控的“软重置”方案，尤其适合 UI 组件库的根容器
常见踩坑：为什么加了 all: unset 后文字消失了或错位了？
这不是 all: unset 本身的问题，而是它暴露了隐含依赖：
立即学习“前端免费学习笔记（深入）”；
- 父元素没设
font-size或color，子元素继承后变成inherit→ 实际渲染为16px / #000，但若父级被其他规则压制（如color: transparent），子元素也会透明 -
display被重置为initial（即inline），导致原本块级的<div> 变成内联，换行失效 <li>用了 <code>all: unset却忘了手动恢复必要样式，比如box-sizing: border-box（它的initial值是content-box）
推荐组合写法：
.card {
all: unset;
box-sizing: border-box;
display: block;
}
兼容性和性能要注意什么？
all 属性在 Chrome 37+、Firefox 27+、Safari 9.1+ 支持，IE 完全不支持——如果需兼容 IE，不能只靠 all: unset，得配合传统重置（如 margin: 0; padding: 0;）。
性能上没有明显开销，但它会强制重置整个样式层叠链，所以别滥用在高频更新的动画元素上；更关键的是，它会让 DevTools 的“Computed”面板里大量属性显示为 inherited 或 initial，排查具体来源时需要多点一层“Styles”看原始声明。
真正难处理的，其实是那些你根本没意识到正在继承的属性，比如 text-rendering 或 font-kerning ——它们被 unset 后变成 initial，可能让文字渲染变模糊，但你很难第一时间定位到。
