用几个方法去掉 CSS Reset 带来的影响-JavaScript中文网-JavaScript教程资源分享门户

当我们开始学习前端开发时，CSS Reset 可能是其中一个陌生的概念。CSS Reset 的作用是将样式重置为相对标准化的起点，避免跨浏览器差异带来的问题。但是，CSS Reset 也可能会导致我们的样式表出现一些错误，例如字体大小和行高的计算等。本文中，我们将讨论一些解决 CSS Reset 带来的问题的方法。

问题1：字体大小和行高

使用 CSS Reset 通常会导致一些字体大小和行高的计算错误。例如，重置中可能会将字体大小设置为 10px。这意味着除非您明确指定其他的字体大小，否则每个元素都将使用 10px 的字体大小。当然，这不是我们想要的方式。所以，我们可以尝试使用 inherit 的方式来解决这个问题。

<body>
    <div class="parent">
        <p class="child">Lorem ipsum dolor sit amet...</p>
    </div>
</body>

.parent {
    font-size: 16px;
}

.child {
    font-size: inherit;
    line-height: normal;
}

以上代码中，我们将字体大小设置为 16px，然后在子元素中使用 inherit。这样就可以保证子元素和父元素的字体大小相同了。另外，当你使用 inherit 的时候，要注意其他的 CSS 特性也会被继承。所以，我们还需要将行高也进行适当地设置。

问题2：表单

CSS Reset 通常会影响表单的表现，导致表单的外观不可控。例如，某些浏览器在重置后可能会将所有表单元素的外观更改为无边框或灰色。我们可以通过设置标准 box-sizing 属性来解决这个问题而不干扰其他元素的外观。

input {
    box-sizing: border-box;
}

当我们设置了 box-sizing: border-box; 时，输入元素的宽度和高度将包括边框和内边距。这样我们就不需要再去处理 padding-box 或 content-box 的问题了。

问题3：去掉列表点

很多 CSS Reset 会把列表项的标志点去掉。这使得很难统一自己的列表风格。我们可以通过简单地将样式设置为list-style: none; 来解决这个问题。

ul {
    list-style: none;
}

li {
    list-style-type: initial;
}

代码中，我们移除了列表项自带的样式，然后在需要时添加样式。例如，我们在这里将 li 的 list-style-type 设置为 initial，这样，标记就会随着父元素的变化而自动变化了。

结论

当我们想要更灵活地控制我们的网页的样式时，CSS Reset 可能会产生更多问题而不是解决问题。在执行 CSS Reset 后，您可以针对需要处理的位置使用上述技巧来修改样式。为了生产体验和视觉效果的质量，我们需要灵活和独立地控制样式。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/674e62d8e884a3e30f25ba6e