在css中使用 all: unset 可以一键重置元素的所有继承和非继承属性，使其回到浏览器默认状态。该声明会遍历所有 css 属性，将继承的属性设为其初始值（如 color、font-family），将非继承的属性设为其计算后的初始值（如 margin、padding）。对于自定义组件或复杂布局，这能彻底清除之前应用的所有样式规则，包括来自框架的全局样式。
all: unset 对继承与非继承属性的具体影响是什么
all: unset 的行为取决于属性的类型。对于继承属性（如 color、font-size），它会被重置为 initial 值，即浏览器默认值。对于非继承属性（如 display、width、border），它同样被重置为 initial 值。这意味着元素会失去所有自定义的盒模型设置和布局属性，变回最原始的状态。需要注意的是，某些现代浏览器对 all 属性的支持可能存在细微差异，但主流环境均兼容此行为。
/* 基础样式 */
.custom-component {
all: unset;
}
/* 重置后重新定义必要样式 */
.custom-component {
display: block;
color: inherit;
font-family: sans-serif;
}
上述代码展示了如何先使用 all: unset 清空所有样式，然后手动恢复必要的显示模式和字体。这种模式特别适用于需要完全隔离样式的 Web Components 或第三方嵌入内容。执行后，.custom-component 元素将不再受父级或全局样式表的影响，仅应用后续定义的规则。
为什么 all: unset 比逐个重置属性更高效
逐个重置属性需要开发者明确知道哪些属性被修改过，这在大型项目中极易遗漏。而 all: unset 是一种“暴力”但全面的重置手段，它能确保没有任何隐藏样式残留。相比之下，all: initial 效果类似，但 unset 在某些上下文中可能更直观地表达“撤销所有更改”的意图。对于自定义组件，这种一次性重置避免了繁琐的调试过程，直接获得一个干净的画布。
/* 对比：逐个重置 vs all: unset */
.old-way {
margin: 0;
padding: 0;
border: none;
background: transparent;
/* ... 其他几十个属性 */
}
.new-way {
all: unset;
}
通过对比可以看出，all: unset 极大地简化了代码量。在实际开发中，建议在使用 all: unset 后立即定义组件的核心样式，以防止元素因缺少必要样式而变得不可见或布局错乱。这种方法尤其适合用于创建高度可复用的原子组件，确保其在任何父级环境中都能保持一致的表现。
使用 all: unset 时如何处理 display 属性的丢失
当应用 all: unset 时，display 属性会被重置为其初始值。对于大多数 HTML 元素，初始值是 inline。如果自定义组件原本依赖 block 或 flex 布局，重置后会导致布局塌陷或错位。因此，必须在重置后显式指定 display 属性。例如，若组件需要占据整行，需重新设置 display: block；若需要内部弹性布局，需设置 display: flex。忽略这一点是导致重置后样式异常的最常见原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
