Was ist das Box-Modell?
Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 33 von 76.
In CSS wird jedes HTML-Element gemäß dem Box Model als rechteckige Box behandelt. Dieses Modell besteht aus vier Hauptteilen:
- Inhalt: Der eigentliche Text, das Bild oder anderer Inhalt innerhalb der Box.
- Innenabstand: Abstand zwischen dem Inhalt und dem Rand. Er vergrößert das Element, behält die Hintergrundfarbe jedoch innerhalb des Elements.
- Rahmen: Eine Linie, die
paddingund den Inhalt umgibt. Sie kann verschiedene Stile, Farben und Breiten haben.
- Außenabstand: Der Abstand außerhalb des Rahmens, der das Element von anderen Elementen trennt.
Das Verständnis des Box-Modells hilft dabei, Abstände und Layouts im Webdesign zu steuern! 🚀
Probier es selbst
Diese Lektion enthält keine Programmieraufgabe.
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Styling mit CSS
4Textgrundlagen
TextfarbeSchriftfamilieSchriftgrößeSchriftstärkeTextausrichtungTextdekorationWiederholungsaufgabe Nr. 1Wiederholungsaufgabe Nr. 27Box-Modell Teil 1
Was ist das Box-Modell?InnenabstandAußenabständeRahmenBreite und HöheWiederholungs-Challenge
5Farben und Hintergründe
HintergrundfarbeHEX-FarbenRGB-FarbenTransparenz mit RGBAWiederholungs-Challenge #111Layout-Techniken
Block- vs. Inline-ElementeGrundlagen der PositionierungRelative PositionierungAbsolute PositionierungFixierte PositionierungGrundlagen von z-indexWiederholungs-Challenge14Letzte Herausforderungen
Elemente anordnenFilmlisteHochzeitseinladungskarteSchwebende Benachrichtigung3Grundlegende Selektoren
Einführung in SelektorenTypselektorKlassenselektorID-SelektorGruppenselektorenUniversalselektorAuswahl-Challenge9Flexbox
Was ist eine Flexbox?Flex-RichtungInhalte ausrichtenElemente ausrichtenDie perfekte ZentrierungFlexbox-Herausforderung12Grundlagen des Responsive Designs
Was ist Responsive Design?Viewport-Meta-TagFließende LayoutsViewport-EinheitenGrundlagen der Media QueriesFlexible BilderÜbe selbstständig: Web-Playground