Язык CSS Говорит: Контейнер против Wrapper?

Ответ 1

Между ними нет никакой разницы.

Это просто то, что вам нравится называть <div>, который часто содержит все содержимое страницы

Ответ 2

В соответствии с этим ответьте:

В языках программирования слово контейнер обычно используется для структуры, которые могут содержать более одного элемента.

A wrapper вместо этого - это то, что обертывает вокруг одного объекта для обеспечения большего количества функциональных возможностей и интерфейсов.

Это определение соответствует значению слов и полезно для структур 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>

Ответ 3

Там может быть разница, если вы решите присвоить ее. На самом деле имеет смысл иметь два имени для контейнера/обертки, поскольку они имеют разные функции:

1) стандартная упаковка, о которой мы думаем, имеет ширину, например, 960px или 60em и центрирует ее содержимое на экране (margin: auto)

2) есть еще один обертыватель - тот, который в некоторых случаях необходим для создания липкого нижнего колонтитула. imo липкий нижний колонтитул с лучшей поддержкой браузера (без js и, по крайней мере, достаточно чистый): http://ryanfait.com/sticky-footer/

apropos sticky: придерживаясь существующих соглашений об именах, мне нравится приложение apppie, которое четко различает оболочку 1 (называемую контейнером) и wrap 2 (называемую оболочкой). см. http://www.apppie.org/pages/approach/naming.html

могут быть и другие соглашения. как сказано, что вы различаете, имеет смысл - как вам решать.

Ответ 4

Я хотел бы добавить что-то здесь:

С текущими стандартами CSS и лучшими практиками, как правило, у вас есть элемент контейнера, который имеет свойство display: grid. Этот div содержит все columns и rows макета. Он также имеет видовой background широким цветом background, border и shadow. Эти свойства отображаются по всей ширине браузера.

Теперь вам нужно добавить контент. Вы должны создать еще один div, это max-width: 1256px и теперь вы даете margin: 0 auto и 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, но я обнаружил, что этот подход эффективен при построении разделов, которые имеют специфическое отдельное оформление из других разделов, таких как тени и границы.

Поэтому в некоторых ситуациях:

container предназначен для укладки всей ширины секции. wrapper предназначена для стилизации и центрирования содержимого max-width внутри.