CSS Reset 是一种优秀的前端开发技术，它帮助我们去除浏览器默认的样式，让我们更加轻松地实现页面设计。但是部分 CSS Reset 中会加入一些不必要的样式，这些样式带来的影响可能会导致我们的设计变得繁琐或者不符合需求。本文将从实际出发，为大家介绍如何去掉 CSS Reset 中的不必要样式。
CSS Reset 简介
CSS Reset 是一种用于去除不同浏览器间的默认样式的技术。通过使用 CSS Reset，可以在不同浏览器的不同场景下，采用统一的样式来排版网页，从而有效解决跨浏览器兼容性的问题。通常情况下，CSS Reset 会清除各种 HTML 元素的默认外边距、内边距、字体及颜色等样式。
CSS Reset 带来的问题
虽然 CSS Reset 可以帮助我们更好地实现网页设计，但是在实际应用中，它同时也会带来一些问题。特别是那些不必要的样式，它们可能会让我们的设计变得繁琐，也可能会与我们的设计需求不符。
下面我们以一个实际场景为例说明这个问题。
假设我们需要在页面中插入三个水平分割线，如下所示：
<div class="line"></div> <div class="line"></div> <div class="line"></div>
我们添加了如下样式：
.line {
height: 1px;
background-color: #ccc;
margin-top: 20px;
margin-bottom: 20px;
}然后我们在页面中预览，发现分割线之间距离非常大。我们在元素检查工具中发现这是由于浏览器默认样式导致的，如下所示：
我们发现，原来的 CSS Reset 中加入了一些不必要的代码，这个代码让分割线之间的间距变得非常大，从而导致我们的设计完全无法实现。这时候，我们应该怎么办呢？
去掉 CSS Reset 中的不必要样式
要去掉 CSS Reset 中的不必要样式，首先要了解其原理。
CSS Reset 常用的代码如下：
// javascriptcn.com 代码示例
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}这段代码会影响网页中的所有元素，清除它们的边距、内边距、边框透明度、字号大小、字体等样式。这个过程会导致原来设计的 CSS 样式失效，从而导致网页显示出不符合需求的样式。
解决这个问题的方法是，在制作网页的时候，不要使用过于全面的 CSS Reset 代码。可以根据实际需求，去掉一些不必要的样式。比如，在刚刚的例子中，我们只需要去掉 Reset 中改变 margin 值的部分即可。
// javascriptcn.com 代码示例
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.line {
height: 1px;
background-color: #ccc;
}这样我们的问题就解决了，分割线之间的间隔变得合理了，如下所示：
需要注意的是，具体要去除哪些样式，需要根据具体情况、页面需求、网站结构等因素来决定。同时，我们在去掉不必要的样式时，也要检查是否会影响到其他元素的样式。这些都需要我们根据具体情况，进行细致的分析和调整。
总结
本文以实际的需求场景为例，讲解了如何去掉 CSS Reset 中的不必要样式。解决问题的关键在于灵活运用 CSS Reset，根据实际需求和页面设计，去除不必要的样式，从而避免过度干扰到我们的设计结构。这一点，在网页制作中非常重要，希望大家都能够掌握这个重要技巧。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6585b647d2f5e1655d046f79