all: unset不重置盒模型属性,因其仅对继承属性设inherit、非继承属性设initial,而margin、padding、border、box-sizing等均由UA样式定义,既非继承也非initial,故完全不受影响;display变inline、box-sizing回content-box、outline归零、border变none均属意外破坏。

all: unset 不重置盒模型属性,因为它不碰 UA 样式
all: unset 只对「可继承属性」设为 inherit,对「不可继承属性」设为规范定义的 initial 值——但浏览器 user-agent stylesheet(UA)给 margin、padding、border、box-sizing 等盒模型属性设的默认值,既不是继承来的,也不等于 initial,所以 all: unset 完全无视它们。
比如:body 的 margin 在 Chrome 中是 8px,这是 UA 规则写的,不是从父级继承的;button 的 border 默认是 1px solid #ccc,而它的 initial 值其实是 none——all: unset 会把它设成 none,但这不是“清掉 UA 样式”,而是“覆盖 UA 样式”,且结果不可控。
哪些盒模型属性会被 all: unset 意外破坏?
它不会“保留”盒模型,反而可能让关键属性回归危险的 initial 值:
-
display变成inline→<div> 塌缩,布局断裂 <li> <code>box-sizing变回content-box→ 你写的width: 100px+padding: 10px实际占 120px,和预期相反 -
outline变成0→ 键盘聚焦完全不可见,无障碍直接失效 -
border变成none→ 按钮/输入框视觉消失,但交互仍在(用户点不到) -
margin: 0和padding: 0——all: unset对padding-inline-start(<ul></ul>缩进)也无效 -
border: none—— 别依赖initial,不同浏览器对border的 UA 实现差异大 -
box-sizing: border-box—— 必须显式设,unset会让它退回content-box -
outline: 2px solid transparent+outline-offset: 2px—— 聚焦可见性不能丢 -
all: revert优先取 UA 样式表定义的值,不是规范initial - 对
<input>、<select></select>、<textarea></textarea>加all: revert,能保住默认 focus outline、cursor、padding - 注意:Firefox 对部分 SVG 属性的
revert支持不一致,Chrome/Safari 更稳
想真正控制盒模型,必须显式写哪些声明?
别指望 all: unset 帮你清盒模型。要可靠重置,得手动覆盖:
立即学习“前端免费学习笔记(深入)”;
all: revert 才是更接近“还原盒模型”的选择
如果你真想保留按钮边框、输入框内边距、<h1></h1> 的字号等原生行为,all: revert 比 unset 更靠谱:
真正麻烦的从来不是怎么写 all,而是你得想清楚:这个元素,到底是该“回归规范初始值”,还是“回归浏览器默认可用状态”——unset 不帮你做这个判断,它只执行规则。漏掉 border 或误用 box-sizing: unset 是线上最常被忽略的坑。


















