CSS Sprache Sprechen: Container vs. Wrapper?

Question

Was ist der Unterschied zwischen Container und Wrapper? Und was ist damit jeweils gemeint?

Answer 1

Según este Antwort:

In Programmiersprachen wird das Wort Container wird im Allgemeinen verwendet für Strukturen, die mehr als ein Element enthalten können.

A Umschlag ist stattdessen etwas, das sich um ein einzelnes Objekt wickelt um es mit weiteren Funktionen und Schnittstellen zu versehen.

Diese Definition entspricht der Bedeutung der Wörter und ist nützlich für HTML-Strukturen wie:

<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

Es gibt keinen Unterschied zwischen ihnen.

Es ist nur das, was Sie gerne als die <div> die oft den gesamten Inhalt einer Seite enthält

Answer 3

Ich möchte hier etwas einwerfen:

Mit den aktuellen CSS-Standards und Best Practices haben Sie normalerweise ein Container-Element, das die display: grid Eigentum. Diese div enthält alle columns y rows des Layouts. Es hat auch ein Ansichtsfenster breit background Farbe, border y shadow . Diese Eigenschaften werden über die gesamte Breite des Browsers angezeigt.

Nun müssen Sie den Inhalt hinzufügen. Sie müssen ein weiteres div erstellen, dieses ein max-width: 1256px und jetzt geben Sie die margin: 0 auto y width: 100% .

Die Struktur wird also sein:

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

Dies bricht die Logik der vorherigen Antwort einer container mit vielen Elementen und einem wrapper nur eine, aber ich habe festgestellt, dass dieser Ansatz effektiv ist, wenn man Abschnitte erstellt, die ein spezifisches, von anderen Abschnitten getrenntes Styling haben, wie Schatten und Grenzen.

Daher kann es in manchen Situationen vorkommen:

A container ist für die Gestaltung der gesamten Breite eines Abschnitts gedacht. A wrapper dient zur Gestaltung und Zentrierung der max-width Inhalt darin.

Answer 4

Es kann einen Unterschied geben, wenn man sich dafür entscheidet, ihnen einen zu geben. Eigentlich ist es sinnvoll, zwei Namen für einen Container/eine Hülle zu haben, da sie unterschiedliche Funktionen haben:

1) Der Standardumbruch, an den wir denken, hat eine Breite von, sagen wir, 960px oder 60em und zentriert seinen Inhalt auf dem Bildschirm (margin:auto)

2) es gibt noch einen anderen Wrap - den, der in manchen Fällen notwendig ist, um einen Sticky Footer zu implementieren. imo ist der Sticky Footer mit der besten Browserunterstützung (kein js und zumindest ziemlich sauber) dieser: http://ryanfait.com/sticky-footer/

apropos sticky: wenn man sich an bestehende Namenskonventionen hält, gefällt mir die von apppie, die klar zwischen Wrap 1 (genannt Container) und Wrap 2 (genannt Wrapper) unterscheidet. siehe: http://www.apppie.org/pages/approach/naming.html

Es mag andere Konventionen geben. Wie gesagt, dass Sie unterscheiden, macht Sinn - wie, bleibt Ihnen überlassen.