all: unset 不能真正“一键重置所有样式”，因为它只重置继承属性为unset、非继承属性保持ua默认值，对button边框、h1字号等内置ua样式无效；需配合all: initial或显式重置border/margin/padding等关键属性。
为什么 all: unset 不能真正“一键重置所有样式”
它确实会清除继承来的样式，但对元素自身默认 UA 样式（比如 <button></button> 的边框、<h1></h1> 的字号）无效——这些不是继承来的，是浏览器内置的 user-agent stylesheet 规则，all: unset 不动它们。
常见错误现象：all: unset 加在 <input type="text"> 上，文字还能选、还能聚焦、边框还在；加在 <ul></ul> 上，列表项前面的小圆点消失了（因为 list-style-type 被重置），但缩进还在（padding-inline-start 是 UA 默认值，未被覆盖）。
-
all: unset=inherit: false+ 所有可继承属性设为unset，非继承属性保持 UA 默认 - 想真正“清空”，得配合
all: initial或显式重置关键非继承属性（如border: none、margin: 0、padding: 0） - 兼容性注意：
all属性 IE 全系不支持，android 4.4–4.4.4 的 webview 也有 bug，慎用于需要兜底的项目
all: revert 在自定义组件里容易误判“还原目标”
all: revert 不是回退到你写的上一条 css 规则，而是尝试还原到该属性在当前上下文中的“用户代理样式表或父级继承值”，具体行为高度依赖浏览器实现和元素类型。
使用场景：封装一个 <my-button></my-button> 自定义元素，希望内部按钮恢复原生表现。但如果你在 Shadow dom 外层写了 body { font-size: 14px; }，而按钮内部用了 all: revert，它的 font-size 可能回退到 UA 的 16px（而非 14px），因为 Shadow DOM 的继承链被切断了。
立即学习“前端免费学习笔记（深入）”；
-
revert对继承属性，尝试从父级取值；对非继承属性，尝试取 UA 默认值 - 在
@layer或!important规则后使用revert，结果不可预测——有些浏览器直接忽略，有些按层叠顺序“跳过”重要声明去 UA 找 - 目前 chrome 和 safari 行为较一致，firefox 对某些 SVG 属性的
revert处理仍存差异
用 all: initial 替代全局重置时要注意布局塌陷
all: initial 把每个 CSS 属性都设为规范定义的初始值（initial 关键字值），比如 display: inline、width: auto、Float: none。这会导致块级元素突然变内联，flex 容器失去弹性，Grid 布局彻底失效。
典型错误：给整个 <article></article> 加 all: initial 想“干净起步”，结果段落挤成一行，图片堆叠错位，margin-top 变成 0 导致标题贴着上边沿。
- 必须手动补全关键布局属性：
display: block、box-sizing: border-box、margin: 0等，否则无法正常使用 -
initial对position是Static，对z-index是auto（即无层叠上下文），这对模态框类组件是致命的 - 性能影响小，但调试成本高——chrome devtools 里你会看到几十个属性标为
initial，却很难快速定位哪个导致了布局异常
真正可控的“重置”得靠组合策略，不是单靠 all
纯靠 all 属性做样式隔离，就像只关一扇窗防暴雨——漏点太多。现代框架（如 Lit、Stencil）内部也基本不用 all 做重置，而是分层处理：继承属性用 inherit: false 或显式 unset，盒模型用 reset: default（需自定义），交互状态单独归零。
最容易被忽略的一点：伪元素（::before、::marker）和替换元素（<img alt="css属性的继承控制_all属性一键重置所有样式" >、<video></video>）的样式重置完全不受 all 控制，必须单独写规则。比如 ul::marker 的颜色、input::placeholder 的透明度，都得额外处理。