Html CSS语言：容器还是包装器？

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

它们之间没有区别

---

这正是你喜欢称之为

的东西，它通常包含一个页面的所有内容

如果你选择给它们一个，它们可能会有所不同。实际上，容器/包装器有两个名称是有意义的，因为它们具有不同的功能：

1） 我们想到的标准包装宽度为960像素或60微米，并将其内容集中在屏幕上（边距：自动）

2） 还有另一个包装——在某些情况下，它是实现粘性页脚所必需的。在我看来，具有最佳浏览器支持（无js，至少相当干净）的粘性页脚如下：

关于粘性：坚持现有的命名约定，我喜欢apppie，它清楚地区分了wrap 1（称为容器）和wrap 2（称为包装器）。见：

可能还有其他约定。如前所述，你们的区分是有意义的——如何区分取决于你们。

根据答案：

在编程语言中，“容器”一词通常用于 可以包含多个元素的结构

包装器是围绕单个对象的东西 提供更多的功能和接口

此定义与单词的含义相匹配，对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>

...


...


...


...


...

我想在这里加入一些东西：

在当前的CSS标准和最佳实践中，通常有一个容器元素具有

display:grid

属性。此

div

包含布局的所有

列

和

行

。它还有一个视口范围的

背景

颜色、

边框

和

阴影

。这些特性将使用浏览器的整个宽度显示

现在您需要添加内容。您必须创建另一个div，这是一个

最大宽度：1256px

，现在您给出

边距：0 auto

和

宽度：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>

这打破了前面答案的逻辑，即容器有许多元素，包装器只有一个，但我发现这种方法在构建与阴影和边框等其他部分具有特定独立样式的部分时非常有效

因此，在某些情况下：

---

A

容器

用于设置一个截面的整个宽度的样式。一个

包装器

用于设置

最大宽度

内容的样式并使其居中。

@allesklar:是的，这样更好。不管怎么说，它的一个功能通常是集中所有内容。第二个答案在消除歧义和区分方面优于这个答案（我是一个web开发人员）；只有我的两分钱。回答不正确。它们之间有区别，我建议你学习。我喜欢这种思维方式。这对我来说很有意义。我同意这个答案。这应该是答案，而不是另一个答案。在这种情况下，我建议使用更有意义的类名。同意，上面的例子是为了简单起见，并为我试图解释的内容提供上下文。这两个都是容器，内部容器只需要一个额外的类。假设您想在一个盒子里放一些糖果。首先你把单个的糖果（用包装纸）包起来，然后把所有的糖果（用包装纸包起来）放进盒子（容器）里