Testen Sie Ihre Fähigkeiten: Das Box-Modell

Interaktives Herausforderung

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

Sehen Sie sich die eingebettete Scrim an und führen Sie die Aufgaben auf der Zeitleiste (die kleinen Geistersymbole) aus, indem Sie die Anweisungen befolgen und den Code bearbeiten. Wenn Sie fertig sind, können Sie die Wiedergabe der Scrim fortsetzen, um zu überprüfen, wie die Lösung des Lehrers zu Ihrer Lösung passt.

Box-Modell 1

In dieser Aufgabe gibt es zwei Kästchen unten, eines verwendet das Standard-Box-Modell, das andere das alternative Box-Modell. Sie sollen die Breite des zweiten Kästchens ändern, indem Sie Deklarationen zur .alternate Klasse hinzufügen, sodass es der visuellen Breite des ersten Kästchens entspricht.

Der Ausgangspunkt der Aufgabe sieht folgendermaßen aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

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

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;
}

Die aktualisierte Gestaltung sollte folgendermaßen aussehen:

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

Box-Modell 2

Um diese Aufgabe abzuschließen, fügen Sie dem bereitgestellten Kästchen folgende Merkmale hinzu:

• Eine 5px schwarze gestrichelte Umrandung.
• Ein oberer Rand von 20px.
• Ein rechter Rand von 1em.
• Ein unterer Rand von 40px.
• Ein linker Rand von 2em.
• Innenabstand auf allen Seiten von 1em.

Der Ausgangspunkt der Aufgabe sieht folgendermaßen aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

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

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

.box {
}

Die aktualisierte Gestaltung sollte folgendermaßen aussehen:

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

Box-Modell 3

In dieser Aufgabe hat das Inline-Element einen Rand, einen Innenabstand und eine Umrandung. Die Linien darüber und darunter überlappen es jedoch.

Um diese Aufgabe abzuschließen, aktualisieren Sie das CSS, um dafür zu sorgen, dass die Größe des Randes, des Innenabstands und der Umrandung von den anderen Linien respektiert wird, während das Element weiterhin inline bleibt.

Der Ausgangspunkt der Aufgabe sieht folgendermaßen aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<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>

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

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

Die aktualisierte Gestaltung sollte folgendermaßen aussehen:

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

• Zurück
• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter