在进行前端开发时，经常会遇到 CSS 样式兼容性问题，为了解决这些问题，我们可以采用 CSS Reset 或 Normalize.css 进行样式初始化。本文将从原理、实战应用、优缺点等方面介绍 CSS Reset 和 Normalize.css。
CSS Reset 和 Normalize.css 的原理
CSS Reset
CSS Reset 的核心思想是将 HTML 元素的默认样式全部清空，从而消除不同浏览器之间的差异，让我们从一个干净的状态出发。
例如，以下是一段简单的 CSS Reset 样式代码:
// javascriptcn.com 代码示例
html, body, div, span, 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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}这段代码会将所有 HTML 元素的 margin、padding、border、outline、font-size 等样式全部清空，从而实现基本的样式初始化。
但是，CSS Reset 也存在一些问题：
一些 HTML 元素的默认样式也具有一定的意义，比如 a 标签的下划线，strong 标签的加粗等。CSS Reset 消除了这些默认样式，可能会对页面的无障碍性、语义化等造成不良影响。
CSS Reset 会大量使用通配符，导致样式污染、选择器优先级问题等问题。
Normalize.css
相对于 CSS Reset，Normalize.css 的目标是在不丢失有用默认值的情况下修复浏览器之间的样式差异。
Normalize.css 通过重新设置默认样式，填补了各种浏览器的样式差异，实现跨浏览器的一致性。同时，Normalize.css 保留了一些有用的默认值，比如 a 标签的下划线等。
例如，以下是一段简单的 Normalize.css 样式代码：
// javascriptcn.com 代码示例
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}可以看到，Normalize.css 解决了 CSS Reset 存在的问题，同时通过适度的默认样式保障了页面的无障碍性和语义化。
Normalize.css 的实战应用
要使用 Normalize.css，我们需要将它导入到项目中。可以通过 CDN 或 npm 安装使用。
通过 CDN 导入：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-b7vBrGWBbW5rZ9/fZh5JrPLXi+OJuxAq3Jy+tkhozoA=" crossorigin="anonymous" />
通过 npm 导入：
npm install normalize.css --save
然后在项目中使用：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS Reset 和 Normalize.css 的实战应用</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-b7vBrGWBbW5rZ9/fZh5JrPLXi+OJuxAq3Jy+tkhozoA=" crossorigin="anonymous" />
<style>
/* 这里是自定义样式 */
</style>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>需要注意的是，Normalize.css 应该在所有其他样式表之前导入。这可以确保浏览器在应用其他样式之前正确地应用 Normalize.css。
总结
本文介绍了 CSS Reset 和 Normalize.css 的原理、实战应用以及优缺点。相比于 CSS Reset，Normalize.css 更加现代化，同时保留了一些有用的默认值，适合在具有一定规模的项目中使用。我们可以根据项目实际情况选择适合的样式初始化方案，提高开发效率，避免样式兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65431e587d4982a6ebcc6b96