CSS Language Speak:Container vs Wrapper？

Question

容器和包装有什么区别？什么是每个人的意思？

Answer 1

根据这个答案:

在编程语言中,单词container通常用于可包含多个元素的结构.

一个包装的反而是一些围绕一个对象包装向它提供更多的功能和接口.

此定义与单词的含义相匹配,对于以下HTML结构非常有用:

<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>

Answer 2

它们之间没有区别.

这就是你喜欢称之为的<div>内容,通常包含页面的所有内容

Answer 3

我喜欢在这里插入一些东西：

根据当前的 CSS 标准和最佳实践，通常您的容器元素具有该display: grid属性。这包含布局的div所有columns和。rows它还具有宽background颜色视口border和shadow. 这些属性使用浏览器的整个宽度显示。

现在您需要添加内容。您必须创建另一个 div，这是 a max-width: 1256px，现在您给出margin: 0 autoand width: 100%。

所以结构将是：

<section class="container">
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</section>

这打破了前一个答案的“container具有多个元素和wrapper一个元素”的逻辑，但我发现这种方法在构建具有与其他部分（如阴影和边框）特定的独立样式的部分时非常有效。

因此，在某些情况下：

Acontainer用于设计截面的整个宽度。Awrapper用于样式设置并将max-width内容居中。