all: initial 将所有CSS属性重置为规范初始值，适用于彻底隔离父级样式、恢复原生渲染状态的场景，但会丢失继承性且display等属性可能不符合预期。
直接用 all: initial 就能重置元素所有 CSS 属性到规范定义的初始值，但要注意它不继承父级样式，且对某些属性（比如 display）的“初始值”可能和你预期不符。
什么时候该用 all: initial 而不是重写单个属性
当你想让某个子元素彻底摆脱父级或全局 CSS 的影响，回归浏览器原始渲染状态时，all: initial 比逐个设 margin: 0、padding: 0 更可靠。典型场景包括：
- 表单内嵌第三方组件（如日期选择器），需要隔离其
input样式 - 模态框里的按钮要恢复原生
button的尺寸和边框，而不是被全局 reset 拉平 - 调试时临时“清空”某段 DOM 的所有样式，快速验证是否是 CSS 干扰导致布局异常
all: initial 和 all: unset 的关键区别
两者都作用于整组属性，但行为不同：
-
all: initial把每个属性都设为 CSS 规范里定义的初始值 —— 比如color变成inherit（实际表现是黑色），display变成inline，font-size变成medium -
all: unset对继承属性设为inherit，对非继承属性设为initial；更适合保留文字类样式继承，同时清除盒模型干扰 - 都不重置
direction和unicode-bidi，这两个属性始终由 HTML 结构决定
容易被忽略的兼容性和副作用
all 属性在 IE 完全不支持，Edge 16+、Chrome 37+、Firefox 27+ 支持。使用前必须确认目标环境。另外要注意：
立即学习“前端免费学习笔记（深入）”；
- 它会清除
font-family、line-height等继承属性，导致文字突然变小或错行 -
display回到initial（即inline）后，块级元素如div会塌缩成一行，需手动补display: block - 如果父容器用了 Flex 或 Grid，
all: initial会让子元素退出布局上下文，变成普通流内元素 - 不要在
body或根级容器上滥用，否则整个页面样式体系就崩了
真正要用好 all: initial，得清楚你到底想“清掉什么”——是只想归零盒模型？还是连字体、颜色、布局模式都要扔？选错就等于自己挖坑。
