CSS Reset：掌握一些技巧，让样式更加完美-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，样式是非常重要的一部分。但是由于不同浏览器的默认样式不同，页面在不同浏览器上展示时会存在差异，这会影响用户体验，并且给开发带来额外的困扰。因此，为了让网页在不同浏览器上展示一致，我们需要进行 CSS Reset。

什么是 CSS Reset?

CSS Reset是一个通用的 CSS 样式集合，它能够取消不同浏览器的默认样式，并将元素的样式设为空，从而实现基于统一标准的网页布局。CSS Reset并非为网页添加新的样式，而是将默认样式取消，让我们重新定制样式。

为什么需要进行 CSS Reset？

在不同浏览器上展示样式存在差异是很普遍的情况，这给用户的浏览、使用、购买等等方面都带来了额外的成本，而这些成本是可以避免的。针对这个问题，我们可以选择使用CSS Reset，其中包含的CSS样式可以覆盖不同浏览器的默认样式，确保页面在各种浏览器和设备下展示一致，能够让用户感受更加流畅和自然。

常用的 CSS Reset 技巧

下面介绍一些常见的 CSS Reset 技巧，它们可以帮助我们在实现 CSS Reset 的过程中更高效的达到目标。

1. 去除默认的 margin 和 padding

为了保证页面的一致性，我们可以在CSS中将所有的 margin 和 padding 值设为 0，并为所有的 HTML 元素添加一个 border-box 盒子模型，这样做可以保证元素的宽度和高度不受 margin 和 padding 的影响。

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

2. 去除列表项样式

在不同浏览器上，列表项 <li> 的默认样式可能会不同，为了保证页面的一致性，我们需要去除列表项的默认样式。

ul, ol{
    list-style: none;
}

3. 去除默认的链接样式

在不同浏览器上，链接 <a> 的默认样式也存在差异，在实现 CSS Reset 的时候，我们需要去除链接的默认字体、颜色和下划线。

a{
    color: inherit;
    text-decoration: none;
}

4. 去除图片默认样式

不同浏览器对于图片元素的默认样式也有所不同，在CSS Reset中，我们需要去掉图片的默认边框和打印时的问题。

img{
    border: none;
    max-width: 100%;
}

如何实现 CSS Reset？

实现 CSS Reset 的方式有很多种，其中最常用的两种方式是使用开源的 CSS Reset 样式库或者自己编写 CSS Reset 样式。

1. 使用开源的 CSS Reset 样式库

目前比较流行的 CSS Reset 样式库有 Normalize.css 和 Reset CSS，它们都能够解决浏览器差异问题，使页面元素在各浏览器中表现一致。我们可以直接引入这些样式库，使用它们所提供的样式来达到 CSS Reset 的目的。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">

2. 自己编写 CSS Reset

自己编写 CSS Reset 是有一定难度的，需要充分理解样式的继承与层叠规则，同时需要充分了解不同浏览器的默认样式。下面是一个简单的 CSS Reset 示例。

// javascriptcn.com 代码示例
html, body, div, span, applet,
object, iframe, 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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

总结

CSS Reset 是一项非常重要的技术，在前端开发中经常被使用。通过仔细研究不同浏览器的默认样式，我们能够编写出有效的 CSS Reset 样式，使得页面在各个浏览器下展示一致，并能够提高用户的体验。希望这篇文章能够帮助读者更好的掌握 CSS Reset 的技巧。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e0a9f7d4982a6ebf1e43d