normalize.css 修复浏览器默认样式不一致但保留语义化行为；应通过包管理器安装并由构建工具注入，或本地引入且置于自定义样式之前；它不处理交互态和组件样式，需额外轻量重置。

Normalize.css 不是“重置”样式，而是修复浏览器默认样式的不一致；直接用 reset.css 会丢掉有用的默认行为（比如 h1 的语义化缩放、audio 的可播放控件），而 normalize.css 保留这些，只修正 bug 和差异。

怎么在项目里正确引入 Normalize.css

别手动复制粘贴 CSS 内容，也别从 CDN 直接 @import（阻塞渲染）。最稳妥的方式是：用包管理器安装，再通过构建工具注入。

• npm 项目：运行 npm install normalize.css，然后在入口 JS 或主 SCSS 文件里写 @import 'normalize.css';（Webpack/Vite 默认支持）
• 如果用原生 HTML + 构建无关流程，下载最新版 normalize.min.css 到 css/ 目录，用 <link rel="stylesheet" href="css/normalize.min.css">，且必须放在所有自定义样式之前
• 切忌把 normalize.css 内容合并进你自己的 main.css 底部——它的规则依赖 specificity 和顺序，后置会导致按钮边框、表单聚焦态等失效

为什么用了 Normalize.css 还有按钮样式不一致

因为 normalize.css 只标准化“默认状态”，不处理用户交互态（如 :hover、:focus）或组件级样式（如 button 的背景色、圆角）。它让 <button></button> 在 Chrome/Firefox/Safari 下都默认有 border、padding、font 继承行为一致，但不会帮你统一成“无边框+蓝底白字”。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 常见错觉：看到按钮在不同浏览器里颜色不同 → 实际是你的 CSS 覆盖了 button 的 background-color，但没重置 border 或 outline，导致 Safari 的 focus ring 和 Chrome 的 focus outline 表现冲突
• 真正要解决的是：在 normalize 后加一层轻量 reset，例如对 button, input, select, textarea 统一设 outline: none（注意可访问性！应改用 box-shadow 模拟 focus 样式）
• 移动端还要额外处理 -webkit-appearance: none，否则 iOS 上 select 仍带原生下拉箭头，button 有灰色背景

Normalize.css 的关键 patch 都修了哪些东西

它不是凭空加样式，而是针对具体浏览器 bug 写的条件修复。比如：

• img 在 IE/Edge 中默认有 vertical-align: baseline，导致行内排版塌陷 → normalize 改成 vertical-align: middle
• input[type="search"] 在 Safari 有私有外观和内边距 → normalize 强制 -webkit-appearance: textfield 并重置 padding
• small 元素在 Firefox 默认是 font-size: 80%，Chrome 是 83% → normalize 统一为 80%
• details / summary 在旧版浏览器不支持 → normalize 不做 hack，而是确保它们至少表现为普通块元素（避免布局崩溃）

真正容易被忽略的是：Normalize.css 对打印样式、高对比度模式、prefers-reduced-motion 等场景不做干预——这些得靠你自己后续扩展。它只解决“页面在常规屏幕上首次渲染时，各浏览器看起来别差太多”这一个目标。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！