在前端开发中，使用 CSS 来控制页面的样式是一项基本技能。但是，不同浏览器对于 HTML 元素的默认样式可能会有所不同，这就给编写样式代码造成了影响。因此，有必要使用 CSS Reset 技术来清除默认样式，统一页面样式表现。
什么是 CSS Reset
CSS Reset，顾名思义，就是为了重置所有 HTML 标签的默认样式。通过清空所有元素的 margin、padding、border、font-size 等属性，使页面的样式在不同的浏览器中表现一致。
CSS Reset 的作用
- 重置默认样式：避免不同浏览器之间的样式表现不一致；
- 明确样式：使用 CSS Reset 可以避免不必要的样式，让样式更加清晰明了；
- 加速加载：当浏览器没有默认样式时，页面将更快地加载。
CSS Reset 的实现方式
CSS Reset 可以通过手动编写 CSS 文件、使用现成的 Reset 工具库等方式来实现。
手动编写 CSS 文件
手动编写 CSS Reset 文件是最基本的实现方式。我们可以创建一个 reset.css 文件，并在它的头部输入如下内容：
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}这样就可以消除所有 HTML 元素的 margin、padding、border 和默认字体大小等属性了。
使用 Reset 工具库
现有的 Reset 工具库有很多，比较流行的有 Normalize.css 和 Modernizr。这里我们以 Normalize.css 为例来介绍一下使用方式。
- 首先，在页面头部引入 Normalize.css
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css">
- 接下来，通过写自己的 CSS 代码来定制风格即可。
使用 Normalize.css 的示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- -----------
----- ---------------- ---------------------------------------------------------------------------
-------
---- -
----------- --------
-
-- -
---------- -----
-------------- -----
-
- -
---------- -----
------------ ----
-------------- -----
-
--------
-------
------
------- ----- --------
------------ --- --------------------
------------- ---- ----------------------------------
-------
-------总结
CSS Reset 技术可以帮助我们消除所有 HTML 元素的默认样式，使页面的样式在不同浏览器中更一致。手动编写 CSS Reset 文件和使用现有的 Reset 工具库都是常用的实现方式。建议使用现有的 Reset 工具库来提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f0e217d4982a6eb816a85