CSS - Box Modell
Das Box Modell (box model) dient zur Beschreibung von HTML Elementen und bezieht sich dabei auf bestimmte CSS Eigenschaften. Bei den sog. Blockelementen lassen sich diese Eigenschaften besonders gut beobachten.
Zur Erinnerung: Bei den Blockelementen, handelt es sich um eine Kategorie von HTML Elementen. Die Elemente sind tatsächlich nichts anderes als Blöcke oder Boxen, nehmen die gesamte zur Verfügung stehende Breite ein und besitzen einen automatischen Zeilenumbruch. Die Höhe richtet sich nach dem Inhalt.
HTML Blockelemente
Blockelemente sind nicht immer auf den Ersten Blick zu erkennen. Mit Hilfe der Dev-Tools lassen sich die Elemente und deren Eigenschaften optisch darstellen.
CSS Eigenschaften
Die Dev-Tools liefern uns die Eigenschaften und die Werte der CSS Regeln und stellen
eine Skizze der Boxen zur besseren Übersicht zur Verfügung.
Die Eigenschaften des Bos Modells beziehen sich auf die Ausdehnungen (Breite & Höhe),
die Abstände (margin & padding) und die Ränder (border)
der Boxen.
Darstellung der CSS Eigenschaften:
Beschreibung der CSS Eigenschaften:
-
Außenabstand:
marginbestimmt den Abstand, den das betreffende Element zu seinem umgebenden Elternelement einnimmt -
Rand:
borderdefiniert Ränder und steuert deren Form und Farbe -
Innenabstand:
paddingsestimmt den Abstand, den das betreffende Element zu seinem Inhalt einhält -
Inhalt:
contentist der sichtbare Teil des Elements
Weitere Eigenschaften
-
display: -
selektor { display: block; }Listing: displayDie CSS Eigenschaft
displaybeschreibt die Art der Darstellung. Blockelemente besitzen standardmäßig den Wertdisplay: block;. -
width&height: -
selektor { width: 100%; height: auto; }Listing: width&heightDie CSS-Eigenschaften bestimmen die Breite und die Höhe der Boxen. Blockelemente besitzen standardmäßig die Werte
width: 100%;undheight: auto;.
Berechnung
Für die Berechnung des Outlinings der Boxen liegen verschiedene Methoden zugrunde. Die zu
verwendende Methode kann mit der CSS Eigenschaft box-sizing bestimmt
werden.
selektor {
box-sizing: border-box;
}
box-sizing (Beispiel)
box-sizing
Durch die Angabe von box-sizing: border-box; konzentriert sich
die Berechnung für die Box auf den Inhalt.
Die Breite und die Höhe umfassen den Inhalt, den Innenabstand und den Rand, jedoch nicht den äußeren Abstand.
Die errechnete Breite (computed-width) eines Elements ergibt sich also aus der Addition der Breite mit den Werten der äußeren Abstände! Die Werte der inneren Abstände und der Ränder werden nicht hinzugerechnet.
Die overflow Eigenschaft
Mit der CSS Eigenschaft overflow kann das Verhalten des Inhalts
in Bezug auf die umgebende Box gesteuert werden.
selektor {
overflow: hidden;
}
overflow (Beispiel)
overflow: hidden;
Durch die Angabe von overflow: hidden; wird verhindert, dass
der Inhalt der Box über die definierten Grenzen "hinaus ragt" (Sprich: Seine eigene
Box floatet).
In der Praxis
Die bereits erarbeiteten Beispiele der Kapitel HTML - Grundlagen und CSS - Einstieg bilden die Basis der folgenden praktischen Arbeit.
<head>
... unverändert ...
</head>
<header>
<p>
Kopfbereich
</p>
</header>
<main>
... unverändert ...
</main>
<aside>
<p>
Seitenbereich
</p>
</aside>
<footer>
<p>
Fußbereich
</p>
</footer>
index.htmlDer Aufbau der Seite ist bisher noch sehr übersichtlich. Aber immerhin gibt es mehrere Elemente die uns eine gute Basis zum Aufbau des Layouts bieten und an dieser Stelle bearbeitet werden können.
Das <body> Elemen enthält mehrere strukturierende Elemente. Im <main> Bereich
befinden sich zwei weitere <section> Elemente mit jeweils einer Überschrift und
einem Textabsatz.
Bei all diesen Elementen handelt es sich um Blockelemente, die damit den Regeln des Box Modells unterliegen.
Verändern Sie die Ausdehnungen und Abstände vom Kopf- / Seiten- / Haupt- und Fußbereich der
Datei index.html. Erweitern Sie die vorhandene externe CSS Datei main.css und
nutzen Sie dazu die erlernten Eigenschaften des Box Modells.
Beide Dateien dienen als Grundgerüst und werden in den folgenden Themenblöcken konsequent erweitert!
1.Darstellung prüfen
Die genutzten Blockelemente besitzen bereits die Eigenscaft display: block;. Wir notieren
die Eigenschaft an dieser Stelle nochmals zu Übungszwecken und fügen die Eigenschaften box-sizing: border-box; und overflow: hidden; hinzu.
2.Dev-Tools nutzen
Jede Box verfügt über einen Außenabstand, einen Rand und einen Innenabstand. Sehen Sie sich die folgende Abbildung an, die Abstände werden grafisch übersichtlich dargestellt.
Beobachten und analysieren Sie Veränderungen am CSS Code mit diesem Werkzeug!
3.Ausdehnung
Im einfachsten Fall können Höhe und Breite durch die Eigenschaften height und
width angepasst werden. Dabei können alle bekannten Einheiten (px,em, rem, %, vh, etc.)
genutzt werden, wie auch bei den folgenden Werten.
4.Außenabstand
Äußere Abstände werden mit der Eigenschaft margin definiert. Hierbei handelt es sich um den Abstand, den das
betreffende Element zu seinen umliegenden Elementen einhält. Der Abstand kann für jede Richtung definiert werden.
margin-top: 0.4rem; margin-right: 0.6rem; margin-bottom: 0.4rem; margin-left: 0.6rem;
Die obigen Regeln können zusammengefasst werden. Die Reihenfolge der Werte ist: {oben / rechts / unten / links}
margin: 0.4rem 0.6rem 0.4rem 0.6rem;
Auch diese Regel lässt sich zusammenfassen. Die Reihenfolge der Werte ist jetzt: {oben und unten / rechts und links}
margin: 0.4rem 0.6rem;
Wenn nur ein Wert angegeben wird, bezieht sich dieser auf alle Richtungen:
margin: 0.6rem;
5.Rand
Die Ränder befinden sich zwischen den äußeren und inneren Abständen und werden mit der
Eigenschaft border gesetzt und können für jede Richtung angegeben werden.
Beachten Sie, dass es sich bei der Eigenschaft um eine Zusammenfassung der drei Regeln:
border-width; border-style und border-color handelt.
border: 1px dashed pink;
6.Innenabstand
Die inneren Abstände werden mit der Eigenschaft padding definiert und können für jede
Richtung angegeben werden. Hierbei handelt es sich um den Abstand, den der Inhalt vom Rand des Elements
einhält.
padding-top: 0.4rem; padding-right: 0.6rem; padding-bottom: 0.4rem; padding-left: 0.6rem;
Die obigen Regeln können zusammengefasst werden. Die Reihenfolge der Werte ist: {oben / unten / rechts / links}
padding: 0.4rem 0.6rem;
Auch diese Regel lässt sich zusammenfassen. Die Reihenfolge der Werte ist jetzt: {oben und unten / rechts und links}
padding: 0.4rem 0.6rem;
Natürlich kann auch hier nur ein Wert notiert werden, dieser bezieht sich dann wieder auf alle vier Richtungen.
CSS anpassen
Mit diesem Wissen betrachten wir den CSS Code und erweitern das Layout des Grundgerüstes:
header, aside, main, footer {
display: block;
box-sizing: border-box;
overflow: hidden;
height: auto;
width: 100%;
margin: 0;
border: 1px dashed pink;
padding: 0.4rem 0.6rem;
}
###.css
Die Element erhalten eine Breite von 100%. Prozentuale Angaben beziehen sich immer auf das übergeordnete Element, hier also auf
das <body> Element! Die Höhe wird durch die Angabe von auto automatisch angepasst.
Der äußere Abstand wird mit der Eigenschaft margin: 0; in diesem Fall zurückgesetzt. Die Werte aus
der Standard-CSS werden überschrieben.
Die Elemente erhalten einen Rand, dieser umläuft durch die Angabe von box-sizing: border-box; den
Inhalt und den inneren Abstand der Elemente. Der äußere Abstand zu anderen Objekten liegt außerhalb "der Box".
Form und Farbe werden durch die CSS Regel border: 1px dashed pink; definiert.
Die inneren Abstände werden mit der Eigenschaft padding: 0.4rem 0.6rem; angepasst. Durch diese Anweisung
erhalten die Elemente einen oberen/unteren Abstand von 0.4rem und einen rechten/linken Abstand von 0.6rem.
Passen Sie das section Element an. Analysieren Sie anschließend das Ergebnis der
veränderten CSS - Eigenschaften.
section {
display: block;
box-sizing: border-box;
overflow: hidden;
height: auto;
width: 84%;
margin: 1.2rem auto;
border: 1px dashed green;
padding: 0.6rem;
}
Weitere Analyse
In unserem Beispiel erhalten die header, aside, main, footer
Bereiche gleiche Eigenschaften. Die Selektoren können daher aneinandergereiht notiert werden.
Dazu werden die Selektoren per Komma voneinander getrennt, anschließend folgt ein Anweisungsblock.
header, aside, main, footer {
...
}
Das <section> Element erhält durch die Anweisung width: 84%; eine geringere Breite .
Damit die <section> Elemente horizontal zentriert angezeigt werden, muss dem rechten und linken
äußeren Abstand der Wert auto zugewiesen werden.
section {
width: 84%;
margin: 1.2rem auto;
}
Betrachten Sie das Ergebnis in einem Browser und analysieren Sie die Auswirkungen. Behalten Sie dabei das Prinzip der Vererbung im Auge! Bereits an dieser Stelle nutzen wir dieses Prinzip. Bestimmte Eigenschaften werden kaskadenartig an geschachtelte Elemente übertragen.
Wir erhalten eine veränderte Ansicht, die einzelnen Bereiche sind jetzt deutlich sichtbar.
CSS Datei
Mit relativ wenigen Anweisungen, haben wir ein solides Grundgerüst geschaffen. Die CSS Datei könnte jetzt folgendermaßen aussehen:
/* -------- */
/* Bereiche */
/* ---------*/
body {
font-family: 'Armata', 'Verdana', 'Arial', 'Helvetica', sans-serif;
font-size: 1rem;
line-height: 1.2;
}
header {
background-color: black;
}
main {
background-color: grey;
}
section {
background-color: #ffffff;
}
aside {
background-color: pink;
}
footer {
background-color: black;
}
header, aside, main, footer {
display: block;
box-sizing: border-box;
overflow: hidden;
height: auto;
width: 100%;
margin: 0;
border: 1px dashed pink;
padding: 0.4rem 0.6rem;
}
section {
display: block;
box-sizing: border-box;
overflow: hidden;
height: auto;
width: 84%;
margin: 1.2rem auto;
border: 1px dashed green;
padding: 0.6rem;
}
/* -------- */
/* Elemente */
/* ---------*/
/* Überschrift */
h1 {
font-size: 1.6rem;
color: #B40000;
}
/* Text */
p {
color: grey;
}
Bearbeiten Sie das Thema: 2. CSS - Selektoren!