解决 CSS Reset 后，样式和排版不一致的问题

背景

在我们开发 Web 应用时，为了兼容不同的浏览器，我们通常会使用 CSS Reset 来统一不同浏览器的默认样式。CSS Reset 会将所有 HTML 元素的样式重置为一致的状态，这样我们就可以自己定义样式，而不必担心浏览器的默认样式会影响我们的设计。

然而，使用 CSS Reset 后，我们可能会发现页面的样式和排版出现了一些问题，比如字体大小不一致、行高不统一、按钮样式不一致等等。这是因为 CSS Reset 并没有提供完整的样式定义，而是将所有样式都重置为初始状态。因此，我们需要进一步定义样式，以满足我们的需求。

解决方案

1. 使用 Normalize.css

Normalize.css 是一款专门为 Web 开发者设计的 CSS 文件，它可以解决 CSS Reset 后出现的样式和排版问题。与 CSS Reset 不同的是，Normalize.css 并不是将所有样式都重置为初始状态，而是尽可能保留浏览器的默认样式，并为不同浏览器提供一致的样式定义。这样，我们可以在不同浏览器上获得一致的页面效果，同时又可以避免浏览器默认样式带来的问题。

使用 Normalize.css 很简单，我们只需要在 HTML 文件中引入 Normalize.css 文件即可：

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

2. 自定义样式

如果我们不想使用 Normalize.css，或者需要进一步定制样式，我们可以自己定义样式。在定义样式时，我们需要注意以下几点：

1）使用相对单位

在定义字体大小、行高等样式时，我们应该使用相对单位，比如 em、rem、% 等。这样可以保证样式的相对一致性，而不受浏览器默认样式的影响。

2）使用通用样式

为了避免重复定义样式，我们可以使用通用样式来定义一些常用的样式，比如：

// javascriptcn.com 代码示例
/* 清除浮动 */
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

/* 禁用选中文本 */
.noselect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 重置列表样式 */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

3）使用样式继承

为了简化样式定义，我们可以使用样式继承来定义样式。比如：

// javascriptcn.com 代码示例
/* 定义按钮样式 */
.btn {
    display: inline-block;
    padding: .5em 1em;
    border-radius: .25em;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
}

/* 定义不同类型的按钮 */
.btn-primary {
    border: 1px solid #007bff;
}

.btn-success {
    border: 1px solid #28a745;
    background-color: #28a745;
}

.btn-danger {
    border: 1px solid #dc3545;
    background-color: #dc3545;
}

/* 定义不同大小的按钮 */
.btn-lg {
    font-size: 1.25em;
}

.btn-sm {
    font-size: .75em;
}

/* 定义禁用按钮 */
.btn-disabled {
    opacity: .5;
    pointer-events: none;
}

在 HTML 中使用按钮时，我们只需要添加相应的 class 即可：

<a href="#" class="btn btn-primary btn-lg">Primary Button</a>
<a href="#" class="btn btn-success btn-sm">Success Button</a>
<a href="#" class="btn btn-danger btn-disabled">Disabled Button</a>

总结

使用 CSS Reset 可以帮助我们统一不同浏览器的默认样式，但也会带来一些样式和排版问题。为了解决这些问题，我们可以使用 Normalize.css 或自定义样式。在自定义样式时，我们需要注意使用相对单位、通用样式和样式继承，以提高代码的可维护性和可读性。

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