Testen Sie Ihre Fähigkeiten: Das Box-Modell
Ziel dieses Fähigkeitstests ist es, zu überprüfen, ob Sie das CSS-Box-Modell verstehen.
Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.
Wenn Sie nicht weiterkommen, können Sie uns über einen unserer Kommunikationskanäle erreichen.
Aufgabe 1
In dieser Aufgabe gibt es zwei Boxen unten; eine verwendet 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:
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 2
In dieser Aufgabe fügen Sie der Box hinzu:
- Einen schwarzen, gepunkteten Rand von 5px.
- Einen oberen Randabstand von 20px.
- Einen rechten Randabstand von 1em.
- Einen unteren Randabstand von 40px.
- Einen linken Randabstand von 2em.
- Einen Innenabstand auf allen Seiten von 1em.
Ihr Endergebnis sollte wie das folgende Bild aussehen:
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 3
In dieser Aufgabe hat das Inline-Element einen Rand, einen Innenabstand und eine Begrenzung. Allerdings überlappen die Linien darüber und darunter es. Was können Sie zu Ihrem CSS hinzufügen, damit die Größe von Rand, Innenabstand und Begrenzung von den anderen Linien respektiert wird, während das Element trotzdem im Inline bleibt?
Ihr Endergebnis sollte wie das folgende Bild aussehen:
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.