直接用 normalize.css 更靠谱，因其有选择地统一渲染差异、保留表单控件等合理默认行为，而 * { margin: 0; padding: 0 } 会粗暴破坏语义化渲染。
为什么直接用 normalize.css 比手写 * { margin: 0; padding: 0 } 更靠谱
因为后者粗暴清空所有默认间距，反而破坏表单控件、列表、表格的语义化渲染，导致后续要反复补样式。而 normalize.css 是有选择地统一渲染差异，保留合理的默认行为——比如 <button></button> 的默认边框、<input type="search"> 的放大镜图标、<details></details> 的折叠箭头。
实操建议：
- 别自己从零写 reset，优先用社区验证过的
normalize.css或modern-normalize（更轻量） - 如果项目已用 Sass，直接
@import 'normalize.scss'（需先 npm install normalize.css） - 避免在
index.scss顶部 import 太多重置文件，容易被后加载的样式意外覆盖
Sass 中如何按需导入 reset 而不污染全局作用域
直接 @import 会把所有规则注入全局 CSS，但有些组件库（如 Bootstrap）自带 reset，叠加后可能冲突。Sass 提供了 @use + namespace 方式隔离作用域，不过 reset 类规则本身是无命名空间的声明，所以关键在「导入时机」和「作用范围」。
实操建议：
- 把 reset 放在
base/_reset.scss，只在最外层main.scss中@import 'base/reset' - 不用
@use 'base/reset' as reset——它对 CSS 规则无效，@use只适用于变量、函数、混入 - 若想局部重置（比如仅对弹窗内容区），用
.modal-content * { all: unset; }配合inherit显式重设需要的属性
all: unset 和 all: revert 在局部重置时怎么选
all: unset 把所有属性设为初始值（margin: 0, font-weight: normal），适合彻底剥离默认样式；all: revert 则回退到浏览器 UA 样式表的值（margin: 1em for <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>），更接近用户预期。但 revert 在 Safari 15.4+ 才稳定支持，旧版会直接失效。
实操建议：
- 做 UI 组件沙盒（如文档 demo 区）时用
all: unset，确保视觉完全可控 - 做内容区域重置（如富文本渲染容器）优先用
all: revert，避免段落、标题失去可读性 - 兼容性兜底写法：
all: unset; all: revert;——后一句覆盖前一句（仅在支持 revert 的环境生效）
Reset 后为什么 <select></select> 和 <textarea></textarea> 看起来“失灵”了
因为 reset 常清掉 appearance、border、background、padding 这些控件专属属性，而这些属性在不同浏览器中默认值差异极大。比如 Chrome 下 <select></select> 默认有 appearance: menulist，清掉后就变成长方形白块。
实操建议：
- reset 后必须显式恢复表单控件基础样式：
input, select, textarea { appearance: none; border: 1px solid #ccc; background: #fff; } - 别依赖
* { all: unset }—— 它会把appearance也干掉，且无法用inherit拉回来 - 移动端尤其注意
-webkit-appearance，iOS Safari 对自定义select支持极差，有时得用 JS 模拟
重置不是越干净越好，关键是把「浏览器差异」和「语义合理」之间的平衡点找稳。最容易被忽略的是：reset 文件的加载顺序、表单控件的 appearance 恢复、以及 revert 在 Safari 中的渐进支持策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
