当前位置:首页 > 文章列表 > 文章 > 前端 > CSS全局重置:先加载Normalize.css

CSS全局重置:先加载Normalize.css

2026-04-26 10:08:38 0浏览 收藏
Normalize.css 是构建跨浏览器一致样式的基石而非兜底补丁,必须严格置于所有自定义 CSS 之前加载——顺序错误将导致按钮边框残留、标题大小不一、表单控件对齐错位等典型问题;它通过智能统一而非粗暴清零(如传统 CSS Reset)来保留语义化标签表现力、修复移动端点击延迟、维持 sub/sup 基线等实用特性,显著降低维护成本;在现代工程中,需通过 index.html 头部引入、构建工具入口文件顶部 import 或 PostCSS 插件等方式确保其优先注入,切忌修改源码或随意删减(如打印样式),以兼顾兼容性、可升级性与开箱即用的稳定性。

CSS如何引入全局CSS重置_在所有样式之前加载Normalize.css

Normalize.css必须在所有自定义CSS之前加载

不按这个顺序,Normalize.css 的样式会被后续规则覆盖,失去“重置”意义。它不是用来“兜底”的,而是作为样式基线存在的。

常见错误现象:button 仍有浏览器默认边框、h1 字体大小不一致、input 垂直对齐错位——往往就是加载顺序错了。

  • HTML中用 引入时,确保它排在第一个
  • 如果用了 CSS-in-JS(如 Emotion、Styled Components),需通过 prepend: true 或类似机制注入 normalize.css
    微信登录更方便
    • 密码登录
    • 注册账号
    登录即同意 用户协议隐私政策
    返回登录
    • 重置密码