在前端开发中，很多时候我们需要清除浏览器的默认样式，以便更好地控制文档的展示效果。这就需要用到 CSS Reset。本文将给大家介绍一份适用于任何情况的 CSS Reset 整理。
什么是 CSS Reset？
CSS Reset 是指将浏览器对 HTML 元素的默认样式设为一致的基础样式，以便于开发者自由地定义样式。CSS Reset 最初由 Eric Meyer 提出，后来有许多个开发者进行了修改和改进。目前已经有很多 CSS Reset 工具包，但是每个项目都有各自的需求和限制，因此我们需要自己来做一份适用于自己项目的 CSS Reset。
如何编写 CSS Reset？
编写 CSS Reset 并不是一件容易的事情，因为我们需要考虑很多元素和情况。在编写 CSS Reset 时，我们需要考虑以下几点：
- 重置元素的盒模型。
- 移除所有列表的样式。
- 移除所有超链接的样式。
- 移除表格、表单等的默认样式。
- 扩展 HTML5 元素样式。
- 兼容旧版浏览器。
下面是一份适用于任何情况的 CSS Reset 代码：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ ----------- ----------- - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- - - - ------ -------- ---------------- ----- - ------ ------ - --------------- ------- -
分析 CSS Reset 代码
box-sizing: border-box;用来指定元素的盒模型，将 padding 和 border 等计算在内。list-style: none;用来移除所有列表的样式，可自行添加需要的样式。quotes: none;用来移除所有引用的样式，可自行添加需要的样式。border-collapse: collapse;和border-spacing: 0;用来移除表格的边框和间距。color: inherit;和text-decoration: none;用来移除所有超链接的样式，可自行添加需要的样式。vertical-align: middle;用来处理表单元素的垂直对齐。
使用 CSS Reset
使用该 CSS Reset 代码非常简单，只需要将它添加到项目的 CSS 文件中即可。
<head> <title>My Web Page</title> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head>
总结
CSS Reset 是前端开发中非常重要的一环，通过清除浏览器的默认样式，我们可以更好地掌控文档展示效果。本文介绍了一份适用于任何情况的 CSS Reset 整理，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f941e5f6b2d6eab30d2374