开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第37天，点击查看活动详情

写在前面

本篇是react学习的第五篇，介绍CSS重置

CSS重置

为什么要添加css重置？

因为在不同的浏览器中，默认样式会有所不同。添加css重置的目的就是统一所有浏览器的默认样式。

在react项目中添加CSS重置

create-react-app 官方文档是使用PostCSS Normalize来重置CSS，我本来以为PostCSS Normalize重置之后会将浏览器的默认样式都取消掉，配置完才发现是将浏览器的默认样式统一，并没有取消，所以个人感觉PostCSS Normalize其实没啥用，配置完之后还是要添加reset.css去取消所有的默认样式。

下面是在react项目中使用PostCSS Normalize的过程：

只需要在src\index.css中添加代码：@import-normalize;即可，如果你不喜欢放在src\index.css文件下，也可以放在src\App\App.css，但是只需要导入一次就可以了，就算在其他地方重复导入了，也会被自动删除，添加之后发现编辑器出现以下报错信息，需要在vscode的设置中修改一下css.lint.unknownAtRules

点击设置搜索unknownAtRules

将warning改成ignore，这样就没有报错信息了。

下面是取消所有浏览器的默认样式的过程

但是就上面这样还不够，我们还需要取消所有浏览器的一些标签的默认样式。在src目录下新增reset.css文件，在文件中添加如下代码：

* {
    margin: 0;
    padding: 0;
}

html,
body,

body {
    font-family: PingFangSC-Regular, PingFang SC, "Microsoft YaHei", "Helvetica Neue", Helvetica,
        "microsoft yahei", arial, STHeiTi, sans-serif;
}

a {
    text-decoration: none;
}

ul,
li {
    list-style: none;
}

textarea {
    font-family: inherit;
}

上面的代码将一些常用的标签的默认样式取消和改写了。同时需要在src\index.js文件中引入该css：import './reset.css';，这样就将所有浏览器的默认样式给取消和重写了。

写在最后

以上就是CSS重置全部代码和说明

react入门5：CSS重置