CSS中“重置”和“规范化”之间的区别

在CSS开发中，我们经常需要重置或规范化CSS样式。这两种方法的目的都是解决浏览器的默认样式的问题，但它们有着不同的方式和效果。

重置 (Reset)

重置 CSS 的目标是无条件地消除浏览器默认样式，并在页面上统一所有元素的样式。重置CSS通常会为所有HTML元素设置margin和padding为0，去掉所有链接的下划线，设定默认字体大小等。它是一个相对激进的方法，需要为每个元素重新设置样式，可能会对一些基础样式产生不必要的影响。

以下是一个常见的重置 CSS 文件：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}
/* 消除所有元素的默认样式*/

规范化 (Normalize)

规范化CSS的目标是创建一个标准的样式基础，在不同浏览器和设备上获得相同的渲染结果。规范化CSS将修改浏览器的默认样式，但保留有用的用户代理样式（例如，a标签的:hover状态），同时修复一些常见的疏漏和问题。规范化CSS不会重置所有的CSS样式，而是在现有的样式基础上进行优化和完善。

以下是一个常见的规范化CSS文件：

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the 'main' element consistently in IE.
 */

main {
  display: block;
}

/* etc... */

结论

重置和规范化 CSS 都可以解决浏览器样式问题。但如果您要从头开始构建自己的样式库，则可以使用规范化CSS获得更好的一致性和易用性。如果您正在重构一个已有的项目，则可以使用重置CSS消除已有的样式并重新定义自己的样式。在任何情况下，请始终选择其中一个，以确保您的，样式在不同浏览器和设备上具有一致的外观与体验。