Was ist das Box-Modell?
Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 33 von 76.
In CSS wird jedes HTML-Element als rechteckige Box behandelt, die dem Box-Modell folgt. Dieses Modell besteht aus vier Hauptteilen:
- Inhalt – Der eigentliche Text, das Bild oder andere Inhalte innerhalb der Box.
- Padding – Abstand zwischen dem Inhalt und dem Rahmen. Es vergrößert die Größe des Elements, aber die Hintergrundfarbe bleibt darin erhalten.
- Rahmen (Border) – Eine Linie, die das Padding und den Inhalt umgibt. Er kann verschiedene Stile, Farben und Breiten haben.
- Margin – Platz außerhalb des Rahmens, der das Element von anderen Elementen trennt.
Das Verständnis des Box-Modells hilft dabei, Abstände und Layout im Webdesign zu kontrollieren! 🚀
Spickzettel
Das CSS-Box-Modell betrachtet jedes HTML-Element als eine rechteckige Box mit vier Teilen:
- Inhalt – Der eigentliche Text, das Bild oder andere Inhalte innerhalb der Box
- Innenabstand (Padding) – Der Raum zwischen dem Inhalt und dem Rahmen
- Rahmen (Border) – Eine Linie, die den Innenabstand und den Inhalt umgibt
- Außenabstand (Margin) – Der Raum außerhalb des Rahmens, der das Element von anderen Elementen trennt
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 with CSS
4Text-Grundlagen
TextfarbeSchriftfamilieSchriftgrößeSchriftstärkeTextausrichtungTextdekorationWiederholungs-Challenge #1Wiederholungs-Challenge #27Box-Modell Teil 1
Was ist das Box-Modell?PaddingMarginsBordersBreite und HöheWiederholungs-Challenge
5Farben und Hintergründe
HintergrundfarbeHEX-FarbenRGB-FarbenTransparenz mit RGBAWiederholungs-Challenge #111Layout-Techniken
Block- vs. Inline-ElementeGrundlagen der PositionierungRelative PositionierungAbsolute PositionierungFixierte PositionierungZ-Index GrundlagenWiederholungs-Challenge14Abschluss-Herausforderungen
Elemente anordnenFilmlisteHochzeitseinladungSchwebende Benachrichtigung3Grundlegende Selektoren
Einführung in SelektorenTyp-SelektorKlassen-SelektorID-SelektorGruppen-SelektorenUniversal-SelektorSelektions-Herausforderung9Flexbox
Was ist Flexbox?Flex DirectionJustify ContentAlign ItemsDie perfekte ZentrierungFlexbox-Herausforderung12Grundlagen des Responsive Designs
Was ist Responsive Design?Viewport Meta TagFluid LayoutsViewport-EinheitenMedia Queries GrundlagenFlexible Bilder