求助：app.css未引入自定义normalize.css模块且边距异常

Hey，我来帮你搞定这个问题！先从最核心的引入问题入手，再一步步排查边距异常的根源：

一、先把自定义normalize.css正确引入到app.css #

关键点是让normalize.css在app.css之前加载——它需要先重置浏览器默认样式，你的自定义样式才能基于干净的基础生效。根据你的项目类型，选对应的引入方式：

• 如果是原生静态项目（没有使用构建工具）：
  在app.css的第一行添加导入语句，注意路径要和你的文件实际位置匹配：

  @import './normalize.css'; /* 若两个文件在同一目录下 */
  /* 如果normalize在子文件夹，比如styles/normalize.css，就写@import './styles/normalize.css'; */
  

• 如果是用Vite、Webpack这类构建工具的项目：
  两种方式都可行，推荐第二种更稳妥：

  1. 在app.css顶部直接导入：

     @import './normalize.css';
     

  2. 在项目入口文件（比如main.js/main.ts）里按顺序导入，确保加载顺序不会乱：

     import './styles/normalize.css'
     import './styles/app.css'
     

二、排查页面边距异常的常见原因 #

搞定引入后如果还有边距问题，大概率是重置不完整或者样式冲突，按这几步查：

1. 检查自定义normalize的重置代码是否完整
   浏览器默认会给body、p、ul等元素加margin/padding（比如body默认有8px margin），你的normalize里必须覆盖这些基础默认样式：

   /* 基础重置示例，你可以对照补充自己的normalize */
   html, body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   /* 让所有元素继承box-sizing，避免宽高计算时的边距异常 */
   * {
     box-sizing: inherit;
   }
   
   /* 重置常用块级元素的默认边距 */
   p, ul, ol, h1, h2, h3, h4 {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   

2. 用浏览器开发者工具排查样式冲突
   按下F12打开开发者工具，选中有异常边距的元素，看Elements面板的Styles标签：

   • 观察有没有被划掉的normalize重置样式（说明被更高优先级的样式覆盖了）
   • 检查是不是第三方样式或者app.css里的自定义样式意外添加了margin/padding

3. 再次确认样式加载顺序
   有时候构建工具的优化会打乱顺序，你可以在浏览器的Network面板里查看css文件的加载顺序，确保normalize.css是第一个被加载的。

按上面的步骤来，应该就能解决你的问题啦！

内容的提问来源于stack exchange，提问作者TheBAST