如何在遇到 CSS Reset 构造布局时保持多列布局？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用 CSS Reset 去消除浏览器的默认样式，从而使我们的页面在不同的浏览器上保持一致的呈现效果。然而，使用 CSS Reset 可能会破坏已有的布局，特别是多列布局。如何在遇到 CSS Reset 构造布局时保持多列布局呢？本文将详细讲解相关技巧以及示例代码，帮助你解决这一问题。

CSS Reset 的作用

在介绍如何保持多列布局前，让我们先来学习一下 CSS Reset 的作用。CSS Reset 是一种消除浏览器默认样式的技术，它将网页元素的大部分属性都设置为相同的值，从而确保各浏览器之间的网页展示风格一致。同时，CSS Reset 还可以消除一些潜在的 bug，比如在 IE 中，表单元素的默认高度在不同版本中都不一样。

常用的 CSS Reset 工具有 Normalize.css、Reset.css 等。示例代码如下：

/* Reset.css */
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, font, 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;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

如何保持多列布局

使用 CSS Reset 后，多列布局可能会被重置掉，导致原本的布局被破坏，这是因为 CSS Reset 大幅度修改了各种元素的默认样式，而多列布局本身就是利用了这些默认样式的特性。

为了保持多列布局，我们可以采用以下两种方法：

方法一：自定义样式

可以通过自定义样式来消除 CSS Reset 对多列布局的影响，比如针对多列布局中的元素样式进行重新定义。例如，我们可以这样来为多列布局添加样式：

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    width: 30%;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

在这个例子中，我们使用了 flexbox 布局来实现多列布局，同时对每个元素的样式进行了特殊定义。这样，即使采用了 CSS Reset，多列布局也能够保持原状。

方法二：选择正确的 Reset 样式

有些 CSS Reset 样式并不会破坏多列布局，比如 Normalize.css，它的重置样式并没有对多列布局进行特殊的处理，所以我们可以选择这类 Reset 样式来避免多列布局被破坏。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多列布局</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/normalize/8.0.1/normalize.min.css">
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .item {
            width: 30%;
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>
</body>
</html>

在这个例子中，我们引入了 Normalize.css 的 Reset 样式，并采用了 flexbox 布局实现了多列布局。这样即使采用了 Normalize.css，多列布局也能够保持原状。

总结

在使用 CSS Reset 时，遇到多列布局被破坏的问题是很常见的。为了避免这个问题，我们可以采用自定义样式或者选择正确的 Reset 样式来保持多列布局的原状。希望本文对你解决这一问题提供了帮助。

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

如何在遇到 CSS Reset 构造布局时保持多列布局？

CSS Reset 的作用

如何保持多列布局

方法一：自定义样式

方法二：选择正确的 Reset 样式

总结

纠错反馈