normalize.css 必须置于所有自定义 css 之前，因其依赖层叠顺序和优先级生效；需紧接添加 * { box-sizing: border-box; }，并手动处理移动端表单外观及避免与 reset.css 混用。
直接用 normalize.css 就能统一浏览器默认样式，但它不是“加了就完事”的魔法文件——加载顺序错、后续没补关键规则、混用 reset 类方案，都会让它失效。
为什么 normalize.css 必须放在所有自定义 CSS 之前
它的规则靠 specificity 和层叠顺序生效。比如它把 button 的 margin 设为 0.5em，而你写 .btn { margin: 1em } 是想覆盖它；但如果 normalize.css 在你自己的 main.css 后面加载，那你的 .btn 规则反而会被它压住。
常见错误包括：
- 手动复制内容粘贴到
main.css底部——完全失去作用 - CDN 链接写在
最底部，被内联<style></style>或异步加载的 CSS 覆盖 - 在 Vue/React 单文件组件里
@import——只局部生效，button全局样式仍不一致
normalize.css 不会自动设 box-sizing: border-box
这是最常被忽略的配套操作。它标准化了 padding、border 的表现，但默认所有元素仍是 content-box。结果就是：你写 width: 100% 的卡片，在加了 padding 后实际撑出父容器。
必须紧接在 normalize.css 后加这一行：
* { box-sizing: border-box; }
注意：* 选择器性能无实质影响（现代浏览器已优化），且它是唯一能覆盖所有元素的写法；用 html, body, div, p, ... 列举既漏又冗长。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
移动端表单控件仍需手动处理
normalize.css 修复了 input[type="search"] 的私有外观、统一了 small 字号，但它不干涉 -webkit-appearance 的默认值。这意味着：
- iOS
<select></select>仍有原生下拉箭头 - iOS
<button></button>默认带灰色背景和圆角 - Safari
<input type="number">右侧有微调按钮，Chrome 没有
对应补丁要自己加：
button,<br>input,<br>select,<br>textarea {<br> -webkit-appearance: none;<br>}<br><br>input[type="number"]::-webkit-inner-spin-button,<br>input[type="number"]::-webkit-outer-spin-button {<br> -webkit-appearance: none;<br>}
别和 reset.css 混用，也别指望它解决一切
混用会导致语义样式冲突：比如 reset.css 清掉 strong 加粗，normalize.css 又保留 :focus 样式，结果 strong 看起来像普通文字，但聚焦时突然弹出 outline。
它也不管这些：
-
textarea的resize行为（Firefox 默认可拉，Chrome/Safari 计算逻辑不同）→ 建议统一设resize: vertical - 自定义 Web Component（如
<my-modal></my-modal>）的 shadow DOM → 它的样式完全不在normalize.css覆盖范围内 - 用户缩放导致的
rem偏移（比如 iOS 双击放大后）→ 这属于运行时状态，CSS 文件无法干预
真正起效的点，永远在 normalize.css 加载之后那几行手动补丁里——顺序、补全、隔离，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
