Angular 4/5中Normalize.css无法生效的问题咨询

嘿，我来帮你理清楚这个问题~

首先得明确一个关键点：normalize.css并不是用来完全清除所有浏览器默认样式的，它的核心作用是统一不同浏览器的默认样式表现，让它们趋于一致，而非把所有样式都归零。比如在常见版本的normalize.css里，<p>元素默认就保留了margin-bottom: 1em的样式，这就是你还能看到边距的直接原因。

再看你配置的styles数组顺序：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "../node_modules/normalize.css/normalize.css",
  "assets/scss/main.scss"
],

这里还有个小细节：你把bootstrap放在了normalize前面，虽然后加载的normalize会覆盖bootstrap的部分样式，但两者都给<p>设置了margin-bottom，最终生效的是normalize的样式——可normalize本身就没把这个边距清掉，所以你依然能看到margin-bottom:10px（不同环境下数值可能因字体设置等略有差异）。

那要实现你预期的“p标签无任何边距”，可以试试这几个方案：

• 方案一：改用reset类样式表
  如果你的需求是彻底清除所有浏览器默认样式，那应该选择reset.css这类专门做样式重置的文件，而非normalize.css。安装对应包后，替换styles数组里的normalize.css路径即可，记得把它放在最前面加载，确保后续的bootstrap和自定义样式能基于重置后的基础来生效。

• 方案二：在自定义SCSS中覆盖样式（最灵活）
  这是更推荐的方式，毕竟normalize和bootstrap的样式都是基础通用样式，你可以在自己的main.scss里添加专属样式来覆盖：

  p {
    margin: 0;
  }
  

  因为main.scss是最后加载的，它的样式优先级足够覆盖前面的normalize和bootstrap样式，不需要额外加!important。

• 方案三：调整styles数组顺序+自定义样式
  把normalize.css移到bootstrap前面加载，让bootstrap的样式能覆盖normalize的部分默认样式，之后再在main.scss里添加清除p标签边距的样式，这样既能保留normalize的跨浏览器统一效果，又能实现你要的无间距需求。

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