Testen Sie Ihre Fähigkeiten: Das Box-Modell

Ziel dieser Fähigkeitstest ist es zu beurteilen, ob Sie das CSS-Box-Modell verstehen.

Hinweis: Für Aufgaben 1–3 klicken Sie auf "Abspielen" in den Code-Blöcken unten, um die Beispiele im MDN Playground zu bearbeiten. Sie können den Code auch kopieren (klicken Sie auf das Symbol „Zwischenablage“) und in einen Online-Editor wie CodePen oder JSFiddle einfügen.

Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.

Interaktive Herausforderung

Zunächst bieten wir Ihnen eine unterhaltsame, interaktive Herausforderung zur Margin-Kurzschrift, erstellt von unserem Lernpartner, Scrimba.

Sehen Sie sich das eingebettete Scrim an und führen Sie die Aufgaben auf der Zeitleiste (die kleinen Geister-Symbole) aus, indem Sie den Anweisungen folgen und den Code bearbeiten. Wenn Sie fertig sind, können Sie das Scrim weiter ansehen, um zu überprüfen, wie die Lösung des Lehrers mit Ihrer übereinstimmt.

Aufgabe 1

In dieser Aufgabe gibt es unten zwei Boxen, eine nutzt das Standard-Box-Modell, die andere das alternative Box-Modell. Ändern Sie die Breite der zweiten Box, indem Sie der Klasse .alternate Deklarationen hinzufügen, sodass sie der visuellen Breite der ersten Box entspricht.

Ihr Endergebnis sollte wie das folgende Bild aussehen:

Zwei Boxen von derselben Größe

Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

html

<div class="box">I use the standard box model.</div>
<div class="box alternate">I use the alternate box model.</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 300px;
  height: 150px;
}

.alternate {
  box-sizing: border-box;
}

Klicken Sie hier, um die Lösung anzuzeigen

Sie müssen die Breite des zweiten Blocks erhöhen, um die Größe des Paddings und des Rahmens hinzuzufügen:

css

.alternate {
  box-sizing: border-box;
  width: 390px;
}

Aufgabe 2

Fügen Sie in dieser Aufgabe der Box folgende Dinge hinzu:

Einen 5px, schwarzen, gepunkteten Rahmen.
Einen oberen Rand von 20px.
Einen rechten Rand von 1em.
Einen unteren Rand von 40px.
Einen linken Rand von 2em.
Padding auf allen Seiten von 1em.

Ihr Endergebnis sollte wie das folgende Bild aussehen:

Eine Box mit einem gepunkteten Rahmen

Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

html

<div class="box">I use the standard box model.</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}

.box {
}

Klicken Sie hier, um die Lösung anzuzeigen

Diese Aufgabe erfordert die korrekte Verwendung der Rand-, Rahmen- und Padding-Eigenschaften. Sie könnten sich entscheiden, die Langform-Eigenschaften (margin-top, margin-right, etc.) zu verwenden, jedoch ist die Kurzschrift wahrscheinlich die bessere Wahl, wenn Sie einen Rand und Padding auf allen Seiten festlegen:

css

.box {
  border: 5px dotted black;
  margin: 20px 1em 40px 2em;
  padding: 1em;
}

Aufgabe 3

In dieser Aufgabe hat das Inline-Element einen Rand, Padding und Rahmen. Allerdings überlappen die Linien darüber und darunter. Was können Sie zu Ihrem CSS hinzufügen, um zu bewirken, dass die Größe des Randes, Paddings und Rahmens von den anderen Linien respektiert wird, während das Element dennoch inline bleibt?

Ihr Endergebnis sollte wie das folgende Bild aussehen:

Ein Inline-Feld mit Abstand zwischen ihm und dem umgebenden Text.

Versuchen Sie, den Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

html

<div class="box">
  <p>
    Veggies es bonus vobis, <span>proinde vos postulo</span> essum magis
    kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
    garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}

.box span {
  background-color: pink;
  border: 5px solid black;
  padding: 1em;
}

Klicken Sie hier, um die Lösung anzuzeigen

Das Lösen dieser Aufgabe erfordert, dass Sie verstehen, wann verschiedene display-Werte verwendet werden sollten. Nachdem Sie display: inline-block hinzugefügt haben, wird der Block-Richtungsrand, Rahmen und Padding dazu führen, dass die anderen Linien vom Element weggedrückt werden:

css

.box span {
  background-color: pink;
  border: 5px solid black;
  padding: 1em;
  display: inline-block;
}

Siehe auch

Grundlagen der CSS-Stilgestaltung