第 10 集：浅谈 Container Wrapper 差异

此篇会探讨 container 与 wrapper 用法，会着重在 wrapper 的探讨。

在开始介绍前，想先说关於 container、wrapper 的关系有不少种解释，我先简单分为两派。

相同派：

两者用法相同，只有名词不同。

异同派：

两者用途不同。

以下内容会以 异同派 的观点介绍 Wrapper。

Container

是一个容器，内入可包含多个元素。

特性：

设置容器大小
容器水平置中

container

Wrapper

常见两种命名方式（两种都可以）：

wrapper
wrap

Wrapper 两种解释：

第一种：

wrapper 代表最外层，包含网页所有内容。

container

看到这张图，你各位啊是不是想留言说我图片放错了！

wrapper1

其实要用一层一层结构来看上面这张图，第一层是 <body>，下一层是 wrapper，两者从结构来看其实是重叠的，因此通常会忽略。

那为什麽会需要多这一层 wrapper?

将网页元素内容与 <body> 隔开。
将对全站样式设置在 wrapper，避免污染到 <body>。

上述两点也有其它方法可以达到相同效果：

<main> HTML 标签，用来包含主要内容。
EJS 样板语言。

第二种：

wrapper 内层仅包含 单 个元素。

wrapper2

结构来看上面这张图，wrapper 主要用来当作衔接 container 内层元素的街口。

这样做的好处是？

HTML 结构更清晰
语意化
好维护

我觉得有点像 BEM 连接词的感觉，用来连接父容层器，使阶层的关系一眼明了。

以上纯属个人言论，若有错误欢迎大家在下方留言，也欢迎想交流的都可以在下方留言。

示范

简单用两个范例介绍。

第一种范例：

<body> 需要设置的全站样式，设置在 wrapper 上面。

<body>
  <div class="wrapper">
    <div class="container">
      container
    </div>
  </div>
</body>

.wrapper {
  padding: 40px 20px;
  line-height: 1.5;
}

.container {
  margin: 0 auto;
  max-width: 1000px;
  background: green;
  padding: 20px;
}

第二个范例：

wrapper 用来连接 container 内层元素。

<ul class="items-container">
  <li class="item-wrapper">
      <div class="item">...</div>
  </li>
  <li class="item-wrapper">
      <div class="item">...</div>
  </li>
  <li class="item-wrapper">
      <div class="item">...</div>
  </li>
  <li class="item-wrapper">
      <div class="item">...</div>
  </li>
  <li class="item-wrapper">
      <div class="item">...</div>
  </li>
</ul>