Html CSS 语言说：容器与包装器？

CSS Language Speak: Container vs Wrapper?

提问by keruilin

What's the difference between container and wrapper? And what is meant by each?

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

采纳答案by Harmen

There is no difference between them.

它们之间没有区别。

It's just what you like to call the <div>that, often, contains all content of a page

这正是您喜欢称呼的<div>，通常包含页面的所有内容

回答by m.rufca

According to thisanswer:

根据这个答案：

In programming languages the word containeris generally used for structures that can contain more than one element.

A wrapperinstead is something that wraps around a single object to provide more functionalities and interfaces to it.

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

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

This definition matches with meaning of words and it's useful for HTML structures like:

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

回答by sasha

There can be a difference, if you choose to give'em one. Actually it makes sense to have two names for a container/wrapper, as they have different functions:

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

1) the standard wrap we think of has a width of let's say 960px or 60em and centers its content on the screen (margin:auto)

1) 我们想到的标准 wrap 的宽度为 960px 或 60em 并将其内容在屏幕上居中 (margin:auto)

2) there's another wrap - the one that is in some cases necessary to implement a sticky footer. imo the sticky footer with the best browser support (no js and at least quite clean) is this one: http://ryanfait.com/sticky-footer/

2）还有另一个包装 - 在某些情况下实现粘性页脚所必需的包装。imo 具有最佳浏览器支持（没有 js，至少很干净）的粘性页脚是这个：http: //ryanfait.com/sticky-footer/

apropos sticky: sticking to existing naming conventions, I like the one of apppie, which clearly distinguishes between wrap 1 (called container) and wrap 2 (called wrapper). see: http://www.apppie.org/pages/approach/naming.html

apropos sticky：坚持现有的命名约定，我喜欢 apppie 中的一个，它明确区分了 wrap 1（称为容器）和 wrap 2（称为包装器）。见：http: //www.apppie.org/pages/approach/naming.html

there might be other conventions. as said, that you distinguish makes sense - how is up to you.

可能还有其他约定。如上所述，您区分是有道理的-如何由您决定。

回答by Edgar Quintero

I like to throw in something here:

我喜欢在这里扔东西：

With current CSS standards and best practices, usually you have a container element that has the display: gridproperty. This divcontains all the columnsand rowsof the layout. It also has a viewport wide backgroundcolor, borderand shadow. These properties are displayed using the entire width of the browser.

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

Now you need to add the content. You have to create another div, this a max-width: 1256pxand now you give the margin: 0 autoand width: 100%.

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

So the structure will be:

所以结构将是：

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

This breaks the previous answer's logic of a containerhaving many elements and a wrapperjust one, but I've found this approach to be effective when building sections that have specific separate styling from other sections like shadows and borders.

这打破了先前答案的container具有多个元素而wrapper只有一个元素的逻辑，但我发现这种方法在构建具有与阴影和边框等其他部分不同的特定样式的部分时非常有效。

Therefore, in some situations:

因此，在某些情况下：

A containeris for styling the entire width of a section. A wrapperis for styling and centering the max-widthcontent inside it.

Acontainer用于样式化部分的整个宽度。Awrapper用于样式化和居中其中的max-width内容。