第 10 集：淺談 Container Wrapper 差異

13th鐵人賽 container wrapper css container wrapper

Kent

2021-09-25 23:53:46

7190 瀏覽

此篇會探討 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>