Testen Sie Ihre Fähigkeiten: Das Box-Modell

Interaktive Herausforderung

Zunächst bieten wir Ihnen eine unterhaltsame, interaktive Herausforderung zur Verkürzung von Rändern, erstellt von unserem Lernpartner, Scrimba.

Sehen Sie sich das eingebettete Scrim an und erledigen Sie die Aufgaben in der Timeline (die kleinen Geistersymbole), 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 verwendet das Standard-Box-Modell, die andere das alternative Box-Modell. Wir möchten, dass Sie die Breite der zweiten Box durch Hinzufügen von Deklarationen zur .alternate Klasse ändern, sodass sie der visuellen Breite der ersten Box entspricht.

Ihr Endergebnis sollte wie die folgende Darstellung aussehen:

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

Dies ist der Anfangszustand der Aufgabe:

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

Aufgabe 2

Um diese Aufgabe abzuschließen, fügen Sie der bereitgestellten Box die folgenden Eigenschaften hinzu:

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

Ihr Endergebnis sollte wie die folgende Darstellung aussehen:

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

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

.box {
}

Dies ist der Anfangszustand der Aufgabe:

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

Aufgabe 3

In dieser Aufgabe hat das Inline-Element einen Rand, Innenabstand und Rahmen. Allerdings überlappen die Linien darüber und darunter es.

Um diese Aufgabe abzuschließen, aktualisieren Sie das CSS, damit die Größe des Rands, Innenabstands und Rahmens von den anderen Linien respektiert wird, während das Element weiterhin inline bleibt.

Ihr Endergebnis sollte wie die folgende Darstellung aussehen:

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

Dies ist der Anfangszustand der Aufgabe:

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

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