all: unset 并非一键清空，而是对可继承属性设为 inherit、不可继承属性设为 initial，不覆盖ua默认样式；适用于 del/mark/small 等语义纯元素，禁用于表单控件。
all: unset 不是“一键清空”，而是按继承性切换值
all: unset 会把可继承属性（如 color、font-family、line-height）设为 inherit，不可继承属性（如 margin、border、padding、width）设为 initial。它不碰浏览器 UA 样式表里的默认规则——button 还是有边框，h1 还是有字号，body 还是有 margin: 8px。
常见误判：给 input 加了 all: unset，发现边框还在、光标还能闪、文字还能选，就以为“没生效”。其实它生效了，只是 UA 默认边框没被覆盖。
-
color: unset等价于color: inherit，不是变黑，而是往上找父级的color计算值 -
display: unset会变成display: initial→ 即inline，div就塌了 -
box-sizing: unset回到content-box，而你通常想要border-box
哪些元素适合直接用 all: unset
真正安全的使用场景非常有限，只推荐用于语义纯、无交互、无默认视觉强依赖的标签：
-
<del></del>、<mark></mark>、<small></small>这类仅表达语义、本身不带关键 UI 行为的元素 - 组件内部子节点（如按钮里的图标：
button .icon { all: unset; }），再手动补width、height、background - 配合
:where()做局部 Reset 时作为起点，但必须紧跟display: revert或显式display声明
别对 input、select、button、a 直接上 all: unset——cursor 消失、outline 归零、键盘聚焦不可见，可访问性直接掉线。
想“真正清空”，得组合写法
单靠 all: unset 无法达成视觉和功能上的“干净起点”。可靠做法是显式覆盖关键非继承属性 + 统一盒模型：
- 重置盒模型基础：
margin: 0; padding: 0; border: none; outline: none; - 统一尺寸计算：
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } - 若真要回归规范初始值，改用
all: initial，但必须补display（比如display: block或按需设） - 全局重置？别用
* { all: unset }——它会让ul的list-style消失但缩进还在，table的border-collapse回到separate，布局全乱
最容易被忽略的三个坑
实际项目里栽跟头最多的地方，往往不是语法写错，而是对“重置目标”没想清楚：
-
border和outline必须显式写none，all: unset不会清除 UA 默认边框 -
box-sizing: unset是倒退操作，它把你主动设的border-box打回content-box，引发尺寸计算偏差 -
display被重置后变成inline，块级容器塌缩、浮动失效、Flex/Grid 子项行为异常——这个最隐蔽，调试时容易绕远路
用之前先问一句：你到底想让这个元素“回归规范初始值”，还是“保留浏览器默认行为但清除继承干扰”？all: unset 不替你回答这个问题，它只执行规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
