====== CSS Box-Modell: Aufbau, Abmessungen & Eigenschaften ======

Das CSS-Box-Modell bildet das Fundament für das Layout und die Positionierung von HTML-Elementen auf Webseiten[cite: 9]. Jedes HTML-Element wird als rechteckige Box dargestellt[cite: 9].

===== 1. Die Bestandteile einer Elementbox =====

Eine Elementbox setzt sich aus vier verschachtelten Bereichen zusammen (von innen nach außen)[cite: 9]:

  * **Content (Inhaltsbereich):** Enthält den eigentlichen Inhalt wie Text, Bilder oder verschachtelte Elemente[cite: 9].
  * **Padding (Innenabstand):** Transparentes Polster zwischen dem Inhaltsbereich und dem Rahmen[cite: 9].
  * **Border (Rahmen):** Eine Linie, die den Inhaltsbereich samt Padding umschließt[cite: 9].
  * **Margin (Außenabstand):** Transparenter Raum außerhalb des Rahmens, der den Abstand zu benachbarten Elementen regelt[cite: 9].

===== 2. Boxabmessungen & Sizing-Modelle =====

==== Grundlegende Dimensionen ====
Die Abmessungen werden über die Eigenschaften ''width'' (Breite) und ''height'' (Höhe) gesteuert[cite: 9]. Als Werte dienen Längenangaben (z. B. ''px'', ''em''), Prozentwerte oder ''auto''[cite: 9].

==== Das box-sizing Attribut ====
Über die Eigenschaft ''box-sizing'' wird festgelegt, wie sich die Gesamtbreite und -höhe eines Elements berechnen[cite: 9]:

  * ''content-box'' **(Standard):** ''width'' und ''height'' beziehen sich ausschließlich auf den Inhaltsbereich[cite: 9]. Padding und Border werden zur Gesamtbreite hinzuaddiert[cite: 9].
  * ''border-box'': ''width'' und ''height'' beinhalten bereits Padding und Border[cite: 9]. Dies erleichtert responsive Layouts erheblich[cite: 9].

<code css>
/* Berechnungsbeispiel bei width: 500px, padding: 50px, border: 10px */

div.content-box-example {
  box-sizing: content-box;
  width: 500px;
  /* Gesamte sichtbare Breite = 500px + 2x50px + 2x10px = 620px */
}

div.border-box-example {
  box-sizing: border-box;
  width: 500px;
  /* Gesamte sichtbare Breite bleibt exakt 500px */
}
</code>

==== Umgang mit Überlauf (overflow) ====
Wenn Inhalt die festgelegten Abmessungen einer Box überschreitet, steuert ''overflow'' das Verhalten[cite: 9]:
  * ''visible'': Inhalt quillt über die Box hinaus (Standard)[cite: 9].
  * ''hidden'': Überstehender Inhalt wird abgeschnitten und ist unsichtbar[cite: 9].
  * ''scroll'': Erzeugt dauerhaft Bildlaufleisten[cite: 9].
  * ''auto'': Zeigt Bildlaufleisten nur bei Bedarf an[cite: 9].

===== 3. Padding (Innenabstand) =====

Das Padding lässt sich einzeln (''padding-top'', ''padding-right'', ''padding-bottom'', ''padding-left'') oder über die Kurzschreibweise im Uhrzeigersinn (TRouBLe: Top, Right, Bottom, Left) definieren[cite: 9]:

<code css>
/* Einzelne Angaben */
blockquote {
  padding-top: 2em;
  padding-right: 4em;
  padding-bottom: 2em;
  padding-left: 4em;
}

/* Kurzschreibweisen */
blockquote { padding: 2em 4em 2em 4em; } /* Oben, Rechts, Unten, Links */
blockquote { padding: 2em 4em 2em; }     /* Oben, Links+Rechts, Unten */
blockquote { padding: 2em 4em; }         /* Oben+Unten, Links+Rechts */
blockquote { padding: 2em; }             /* Alle 4 Seiten gleich */
</code>

===== 4. Borders (Rahmen) & Eckenabrundung =====

Ein Rahmen benötigt zwingend die Angabe eines Stil-Typs (''border-style''), damit er gerendert wird[cite: 9].

==== Eigenschaften & Kurzschreibweise ====
  * **Mögliche Stile (border-style):** ''none'', ''solid'', ''dotted'', ''dashed'', ''double'', ''groove'', ''ridge'', ''inset'', ''outset''[cite: 9].
  * **Breite (border-width):** Längenangaben oder Schlüsselwörter (''thin'', ''medium'', ''thick'')[cite: 9].
  * **Farbe (border-color):** Farbwerte[cite: 9].

<code css>
/* Einzelausdrücke */
div#example {
  border-width: 2px;
  border-style: solid;
  border-color: aqua;
}

/* Kurzschreibweise: border: [width] [style] [color]; */
p.example {
  border: 2px dotted aqua;
}
</code>

==== Abgerundete Ecken (border-radius) ====
Mit ''border-radius'' werden Ecken abgerundet[cite: 9]. Werte können in Pixeln oder Prozent angegeben werden[cite: 9].

<code css>
p {
  border-radius: 1em;          /* Alle Ecken gleich */
  border-radius: 1em 2em;      /* Oben-Links/Unten-Rechts , Oben-Rechts/Unten-Links */
  border-top-left-radius: 50px;/* Einzelne Ecke */
}
</code>

===== 5. Margins (Außenabstand) & Margin Collapsing =====

==== Definition ====
Der Margin erzeugt Abstand außerhalb des Rahmens zu benachbarten Elementen[cite: 9]. Die Syntax entspricht exakt der Kurzschreibweise von Padding[cite: 9].

==== Zusammentreffen von Außenabständen (Margin Collapsing) ====
Vertikale Margins (oben/unten) von aufeinanderfolgenden Block-Elementen addieren sich nicht, sondern **kollidieren**[cite: 9]. Es setzt sich jeweils der **größere Wert** durch[cite: 9].

<code css>
/* Beispiel für Collapsing: */
.element-top { margin-bottom: 4em; }
.element-bottom { margin-top: 2em; }

/* Der resultierende Abstand zwischen den Elementen beträgt 4em (nicht 6em). */
</code>

===== 6. Anzeigerollen & Schlagschatten =====

==== Display-Eigenschaft (display) ====
Steuert das Verhalten der Elementbox im Textfluss[cite: 9]:
  * ''block'': Element nimmt die volle Breite ein und beginnt auf einer neuen Zeile[cite: 9].
  * ''inline'': Element fließt im Text und nimmt nur die Breite seines Inhalts ein (Breite/Höhe nicht anpassbar)[cite: 9].
  * ''inline-block'': Fließt wie Inline, erlaubt aber die Definition von ''width'' und ''height''[cite: 9].
  * ''flex'' / ''grid'': Aktiviert moderne Layout-Kontexte[cite: 9].
  * ''none'': Blendet das Element vollständig aus[cite: 9].

==== Schlagschatten (box-shadow) ====
Erzeugt einen Schattenwurf um die Elementbox[cite: 9].
Syntax: ''box-shadow: [horizontal-offset] [vertical-offset] [blur-distance] [spread-distance] [color] [inset];''[cite: 9]

<code css>
div.shadow-a { box-shadow: 6px 6px gray; }                      /* Harter Schatten */
div.shadow-b { box-shadow: 6px 6px 5px gray; }                  /* Weicher Schatten (Blur) */
div.shadow-c { box-shadow: 6px 6px 5px 10px gray; }             /* Blur + Ausdehnung (Spread) */
div.shadow-d { box-shadow: inset 2px 2px 4px rgba(0,0,0,0.5); } /* Innenliegender Schatten */
</code>