Das CSS-Box-Modell

Das Boxmodell in CSS beschreibt die Boxen, die aus HTML-Elementen generiert werden. Die Boxvorlage enthält außerdem detaillierte Optionen zum Festlegen von Rändern, Rahmen, Auffüllung und Inhalt für jedes Element. Das folgende Bild zeigt, wie das Boxmodell aufgebaut ist.
Das Box-Modell oder "Box-Modell" ist sicherlich das wichtigste Merkmal der CSS-Stylesheet-Sprache, da es das Design aller Webseiten bestimmt. Das Boxmodell ist das Verhalten von CSS, das bewirkt, dass alle Elemente auf den Seiten durch rechteckige Boxen dargestellt werden.
Einseitige Boxen werden automatisch erstellt. Jedes Mal, wenn ein HTML-Tag eingefügt wird, wird eine neue rechteckige Box erstellt, die den Inhalt dieses Elements umschließt. Die folgende Abbildung zeigt die drei rechteckigen Felder, die die drei HTML-Tags erstellen, die die Seite enthält.

In Wirklichkeit sind alle Elemente einer Website (Absätze, Links, Bilder, Tabellen usw.) rechteckige Kästchen. Die Browser platzieren diese Felder so, wie wir sie angegeben haben, um die Seite zu gestalten.
Es gibt zwei Arten von Boxen: Block und Inline. Blockelemente unterbrechen den Layoutfluss. Das heißt, sie erscheinen allein und fügen "Zeilenumbrüche" ein. Inline-Elemente folgen dem Fluss und sind in Blockelementen enthalten.
Ein Absatz wäre zum Beispiel ein Blockelement (wir können keinen Absatz nebeneinander haben, aber zwei Absätze hintereinander erscheinen untereinander. Ein Link hingegen ist ein Inline-Element, da dies nicht der Fall ist "schneiden" Sie den Text an der Stelle aus.
Die Teile, aus denen jede Box besteht, und ihre Anzeigereihenfolge aus Sicht des Benutzers sind die folgenden:
Inhalt (Inhalt): es ist der HTML-Inhalt des Elements (die Wörter in einem Absatz, ein Bild, der Text in einer Liste von Elementen usw.)
Polsterung: Optionaler Freiraum zwischen Inhalt und Rahmen.
Saum: Zeile, die den Inhalt und seine Auffüllung vollständig umschließt.
Hintergrundbild: Bild wird hinter Inhalt und Füllraum angezeigt.
Hintergrundfarbe: Farbe, die hinter Inhalt und Füllraum angezeigt wird.
Margin (Margin): optionale Trennung zwischen der Box und den anderen angrenzenden Boxen.
Die Auffüllung und der Rand sind transparent, sodass der von der Auffüllung eingenommene Raum die Hintergrundfarbe oder das Bild (sofern definiert) anzeigt und der vom Rand eingenommene Raum die Hintergrundfarbe oder das Bild Ihres übergeordneten Elements (sofern definiert) zeigt. Wenn für kein übergeordnetes Element eine Hintergrundfarbe oder ein Bild definiert ist, wird die Hintergrundfarbe oder das Bild der Seite angezeigt (sofern definiert).
Wenn eine Box sowohl eine Farbe als auch ein Hintergrundbild definiert, hat das Bild eine höhere Priorität und wird angezeigt. Wenn das Hintergrundbild die Artikelbox jedoch nicht vollständig bedeckt oder das Bild transparente Bereiche hat, wird auch die Hintergrundfarbe angezeigt. Durch die Kombination von transparenten Bildern und Hintergrundfarben lassen sich sehr interessante grafische Effekte erzielen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben