all 属性不是“清空样式”，而是按 inherit/initial/unset/revert 规则重置所有 CSS 属性的计算值；其中 unset 对可继承属性取 inherit、对非继承属性取 initial（如 display 变为 inline），revert 则回退至 UA 样式表默认值，更安全但兼容性略弱。
all 属性不是“清空样式”，而是重置所有属性的计算值
all 是一个简写属性，它会一次性影响元素上**所有可继承或不可继承的 CSS 属性**，但它的行为取决于你给它的值：inherit、initial、unset 或 revert。很多人误以为 all: unset 就是“把样式全删了”，其实它只是按继承性分别处理：对 color 这类可继承属性等效于 inherit，对 margin 这类非继承属性则等效于 initial（比如 margin 变成 0）。所以它不会“清空”，而是“按规则归零或回溯”。
用 all: unset 时，display 会变成 inline，这是最大坑点
因为 display 的 initial 值是 inline，而 unset 对非继承属性就取 initial。这意味着：
- 原本是
<div>（<code>display: block）的元素，加了all: unset后会塌缩成行内表现，不再独占一行 - 原本是
<ul></ul>的列表，会失去块级容器特性，<li>也会错位 - 表单控件如
<input>、<button></button>会退化为inline，可能无法设置宽高或垂直对齐 -
dialog元素加all: revert后，它仍保持display: block、带阴影、居中、可聚焦等 UA 行为 -
button仍保留原生按钮的边框、背景色、焦点 outline（除非 UA 显式禁用） - 它比
unset更“尊重语义”，适合需要保留基础交互能力的组件封装 - 只对明确需要“白板化”的封装容器使用，例如自定义弹窗、微件（widget）、Web Component 的 shadow root 内部
- 配合类名精准作用域：
.custom-card { all: unset; display: block; } - 避免在
body或通用容器上滥用；若真要全局清理，优先用normalize.css或reset.css，它们经过大量测试，不破坏语义流
解决办法很简单：在 all: unset 后显式覆盖 display，比如 display: block 或 display: flex，视语义而定。
为什么 all: revert 在 dialog 上更安全？
revert 不是回到 initial，而是回到浏览器用户代理样式表（UA stylesheet）的默认值。比如：
立即学习“前端免费学习笔记（深入）”；
但注意：revert 兼容性略弱于 unset（Firefox 67+、Chrome 93+、Safari 14.5+），老项目慎用。
局部重置比全局 all 更可控
直接对 * { all: unset } 这类通配符写法，极易引发连锁布局崩溃——子元素继承的是父元素已重置后的值，而非原始 UA 值。实际推荐方式是：
all 是个锋利的工具，它不判断上下文，只执行规则。用之前，先想清楚你要重置的是“视觉表现”，还是“语义行为”——后者往往不能靠一招 all 解决。
