背景介绍
在前端开发中，不同浏览器对于默认的样式渲染效果有所不同，可能会出现样式的不一致或者错位等情况。为了解决这个问题，出现了许多解决方案，其中比较常见的是 CSS Reset 和 normalize.css。
这两种方案都是对于默认样式进行了清除或者重新定义，以达到页面样式的一致性和可控性的目的。
CSS Reset
CSS Reset 是一种将默认的样式都归零或者重置成开发者自己定义的样式，从而达到清除浏览器默认样式的目的。
下面是一个简单的 CSS Reset 示例代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}此代码会将文档中所有元素的外边距和内边距都清除，并将 CSS 样式盒模型定义为 border-box。这种方式可以避免元素的布局混乱和页面溢出的问题。
但是，CSS Reset 存在缺陷：某些元素的默认样式是非常有用和美观的，例如表单元素的默认样式，如果全部清除可能会影响使用体验和美观性。同时，CSS Reset 不能修复一些其他的样式问题，例如一些浏览器对于 WEB 标准的支持不完全，可能仍然出现样式的不一致情况。
normalize.css
normalize.css 是一种比 CSS Reset 更为完善的样式重置方案，其目标是在保留有用的默认样式同时解决浏览器间的样式差异。
normalize.css 主要包括以下功能：
- 保持了有用样式，例如表单元素的默认样式等
- 解决了浏览器间的样式差异，例如轮廓、字体等
- 对于 HTML5 元素适配良好
下面是一个简单的 normalize.css 示例代码：
-- -------------------- ---- ------- ---- - ------------ ----------- --------------------- ----- ------------------------- ----- - ---- - ------- -- - -------- ------ -------- ----------- ------- ------- ------- ------- ----- ----- ---- -------- ------- - -------- ------ - ------ ------- --------- ----- - -------- ------------- - -------- - --------------- --------- - --------- -------- - -------- ----- -
此代码并没有将所有样式都清除，而是根据实际需求进行了样式重置，保留了一些有用的样式，例如表单元素的默认样式。
normalize.css 还对许多 HTML5 的新元素进行了适配，并对一些常见的样式进行了自动修复。
总结
CSS Reset 和 normalize.css 都是处理浏览器默认样式的有效方案，但是其处理方式有所不同，CSS Reset 通过清除所有默认样式，而 normalize.css 则通过自动修复和适配来达到统一效果。
在选择方案时需要根据实际需求进行选择，如果需要保留一些有用的默认样式，可以选择 normalize.css，如果需要完全重新定义样式，则可以选择 CSS Reset。同时需要注意，选择方案需要根据项目实际需求和浏览器的兼容性进行选择，避免产生其他问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c26e4968c7c53b0b31aa6