Einführung in das CSS-Box-Modell
Beim Layout eines Dokuments stellt die Rendering-Engine des Browsers jedes Element als rechteckigen Kasten gemäß dem standardmäßigen CSS-Basis-Box-Modell dar. CSS bestimmt die Größe, Position und Eigenschaften (Farbe, Hintergrund, Randgröße usw.) dieser Boxen.
Jede Box besteht aus vier Teilen (oder Bereichen), die durch ihre jeweiligen Ränder definiert sind: dem Inhaltsrand, Abstandrand, Rahmenrand und Außenrand.
Inhaltsbereich
Der Inhaltsbereich, begrenzt durch den Inhaltsrand, enthält den "wirklichen" Inhalt des Elements, wie Text, ein Bild oder einen Video-Player. Seine Dimensionen sind die Inhaltsbreite (oder Inhalts-Box-Breite) und die Inhaltshöhe (oder Inhalts-Box-Höhe). Häufig hat er eine Hintergrundfarbe oder ein Hintergrundbild.
Wenn die box-sizing-Eigenschaft auf content-box (Standard) gesetzt ist und wenn das Element ein Blockelement ist, kann die Größe des Inhaltsbereichs explizit mit den Eigenschaften width, min-width, max-width, height, min-height und max-height definiert werden.
Abstandbereich
Der Abstandbereich, begrenzt durch den Abstandrand, erweitert den Inhaltsbereich, um den Abstand des Elements einzuschließen. Seine Dimensionen sind die Abstands-Box-Breite und die Abstands-Box-Höhe.
Die Dicke des Abstandes wird durch die Eigenschaften padding-top, padding-right, padding-bottom, padding-left und die Kurzform padding bestimmt.
Rahmenbereich
Der Rahmenbereich, begrenzt durch den Rahmenrand, erweitert den Abstandbereich, um die Rahmen des Elements einzuschließen. Seine Dimensionen sind die Rahmen-Box-Breite und die Rahmen-Box-Höhe.
Die Dicke der Rahmen wird durch die Eigenschaften border-width und die Kurzform border bestimmt. Wenn die box-sizing-Eigenschaft auf border-box gesetzt ist, kann die Größe des Rahmenbereichs explizit mit den Eigenschaften width, min-width, max-width, height, min-height und max-height definiert werden. Wenn ein Hintergrund (background-color oder background-image) auf einem Kasten gesetzt ist, erstreckt er sich bis zum äußeren Rand des Rahmens (d.h. er erstreckt sich unter dem Rahmen in Z-Reihenfolge). Dieses Standardverhalten kann mit der CSS-Eigenschaft background-clip geändert werden.
Außenbereich
Der Außenbereich, begrenzt durch den Außenrand, erweitert den Rahmenbereich, um einen leeren Bereich einzuschließen, der verwendet wird, um das Element von seinen Nachbarn zu trennen. Seine Dimensionen sind die Außen-Box-Breite und die Außen-Box-Höhe.
Die Größe des Außenbereichs wird durch die Eigenschaften margin-top, margin-right, margin-bottom, margin-left und die Kurzform margin bestimmt. Wenn Margin-Collapsing auftritt, ist der Außenbereich nicht klar definiert, da Margen zwischen Boxen geteilt werden.
Beachten Sie schließlich, dass für nicht-ersetzte Inline-Elemente die Menge des eingenommenen Raumes (der Beitrag zur Höhe der Zeile) durch die line-height-Eigenschaft bestimmt wird, auch wenn die Rahmen und Abstände immer noch um den Inhalt angezeigt werden.
Siehe auch
- Layout und das umgebende Blockelement
- Einführung in den CSS-Cascade
- Lernen: Konflikte behandeln
- CSS-Schlüsselkonzepte: