vue或者react的css样式初始(css样式重置)——reset.css与normalize.css

前言：为什么要样式重置即 css reset ？

原因：不同的浏览器在实现w3c标准过程中，对各个元素的实现是不一致的。这就导致了同一个页面在不同的浏览器中比如ie和chrome中，表现有差异。为了解决这个问题，即不同浏览器中表现的一致性，需要使用css reset。

实现

1. 初学

* {
  margin: 0;
  padding: 0;
  border: 0;
}

优缺点：简单粗暴，迅速实现，但是* 通配符需要将所有标签遍历，但标签数量和种类较多的时候，会增加客户端的负担，影响网页性能。

2. 常用

全局引入自定义经典的 reset.css 文件，网上有许多优秀的 reset.css 提供参考

html,
body,
div,
span,
applet,
object,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-weight: normal;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul,
li {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  vertical-align: middle;
}

/* custom */
a {
  outline: none;
  color: #16418a;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}

a:focus {
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: -webkit-focus-ring-color auto 0;
}

3. 最优: normalize.css + reset.css

normalize.css 库

其最大的好处就是normalize.css的作用是保留有用的浏览器默认样式，而不是从每个元素中删除所有默认样式。
如果不够，结合 reset.css 一起使用

安装

npm install normalize.css

yarn add normalize.css

引入

import 'normalize.css/normalize.css'

使用 normalize.css 的主要好处包括：

• 一致的跨浏览器样式：normalize.css 通过标准化浏览器的默认样式，确保在不同浏览器中呈现一致的外观和感觉。
• 保留有用的默认样式：与 reset.css 不同，normalize.css 不会完全移除所有默认样式，而是保留了有用的默认样式（如表单元素的样式）。
• 修复浏览器特定的错误：normalize.css 包含了一些针对特定浏览器的修复，解决了不同浏览器之间的兼容性问题。
• 提高可读性和可维护性：normalize.css 的代码经过精心编写和注释，易于阅读和理解，便于维护和扩展。
• 更好的可访问性：normalize.css 考虑了可访问性问题，确保在不同设备和屏幕阅读器上有良好的表现。