提高前端布局效率的技巧

在布局中，对于每块功能的 DOM 结构，我们一般使用一个带有 wrapper 类元素把它包裹起来，让代码或者网页内容更易于阅读。为此，我们一般使用wrapper 或者 container。在CSS 中使用wrapper可能有多种方式，这些方式中，有些会带来一些问题。

在本文中，将介绍 CSS中 的 wrapper 布局，它们如何工作，如何使用它们以及何时不使用它们。 请注意，在本文中，可能会提到wrapper 和container这两个术语，它们的含义相同。

wrapper 简介

当我们说到 wrapper 或container，实际上是指一组元素被包装或包含在另一个元素内。 我们可以为 `` 元素添加一个 wrapper类，这样我们就不用额外元素，如下所示：

body {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

但是，将 wrapper添加到``元素是不切实际。 wrapper元素可以防止子项超出其边界。 考虑下图：

我们这里有aside和main元素，它们被放在了wrapper 元素中。当然，.wrapper元素有一个宽度。

<div class="wrapper">
    <aside>...</aside>
    <main>...</main>
</div>

如果没有wrapper，子元素将粘附在屏幕的边缘。这可能会让用户非常恼火，尤其是在大屏幕上。

上图显示了当没有用wrapper进行包裹时元素是如何展开的，用户不应该体验这种行为。我们来解释一下背后的原因。

为什么页面上 wrapper 有必要的

通过多加一层 wrapper 布局，有很多好处：

1. 使内容更具可读性。 没有多加一层 wrapper，文本和图像之类的内容就可以拉伸以占据整个屏幕宽度。 对于小屏幕，这似乎可以。 但是，对于大屏幕，这是非常烦人的。
2. 对设计元素进行分组可以更好地增加间距。
3. 在没有wrapper的情况下，将设计元素划分为列是不容易完成的。

在CSS中实现 wrapper

目前我们已经了解了wrapper基础知识和优点，接下来我们来具体的看看在 CSS 如何使用它。

设置宽度

实现wrapper第一件事就是要确认它的宽度。 而宽度如何这取决于 UI 的设计。 一般来说，最常用宽度是1000px-1300px。 例如，流行的框架Bootstrap使用1170px的宽度。

.wrapper {
    width: 1170px;
}

但是，不建议使用width属性，因为当屏幕尺寸小于1170像素时，会出现水平滚动。 可以max-width 来解决这个问题。

.wrapper {
    width: 1170px;
    max-width: 100%;
}

我们还可以更简单点，仅使用 max-width。

.wrapper {
    max-width: 1170px;
}

现在有了宽度，我们可以将它居中 。

居中 wrapper

为了让 wrapper 居中，使用让左右外边距的值为 auto，如下所示：