Das Box-Modell
Alle Elemente auf Webseiten bestehen aus rechteckigen Kästchen oder auch Boxen. Dank solcher rechteckiger Boxen wird es erst möglich, Elemente mit CSS zu positionieren oder das Layout von Webseiten zu erstellen. Im folgenden Beispiel sind alle Boxelemente mit Hilfe des Universalselektors (*) mit einem schwarzen Rahmen versehen:
See the Pen ff9f20ed3aca6c47e4a8939543fe973f by Bernd Schiller (@Bernie14153) on CodePen.
Das klassische Box-Modell von CSS
Auf den ersten Blick besteht eine derartige Box nur aus einer Höhe und einer Breite. Aber zum Boxmodell gehören:
- der eigentliche Inhaltsbereich für Text und Bilder, der mit width (für die Breite) und height (für die Höhe) vorgegeben wird.
- der Innenabstand (Polsterung), der mit padding angegeben wird
- der Rahmen, der mit border notiert wird
- der Außenabstand, der mit margin vorgegeben wird.
Somit setzt sich eine Box aus insgesamt vier Boxen zusammen: einer Contentbox für den Inhalt, einer Paddingbox für die Polsterung, einer Borderbox für den Rahmen und einer Marginbox für den Rahmenabstand. Diese vier Teileinheiten spielen im neuen Box-Modell von CSS3 eine wichtige Rolle. Jede dieser vier Boxen wiederum kann in top (oben), right (rechts), left (links) und bottom (unten) aufgeteilt werden.
Die verschiedene Interpretation der Boxelemente durch unterschiedliche Browser ist eine verbreitete Fehlerquelle bei der Gestaltung des Layouts in einer Webseite.
width und height
Der eigentliche Inhaltsbereich mit der Fläche für Text und Bilder kann mit den CSS-Eigenschaften width und height festgelegt werden. Gibt man keine speziellen Wert für width an, dann ist das HTML-Element so breit wie das umgebende Element. Wenn keine Angabe zu height gemacht wird, werden alle Elemente so hoch, wie der Inhalt eben ist. Wenn der Inhalt des umfassenden Elements größer ist als die vorgesehene Höhe, wird der Inhalt trotzdem angezeigt und überfließt die Box. Abhilfe schafft die CSS-Eigenschaft overflow (s.u.).
See the Pen f83a0b3d10b848d819546742e20c246d by Bernd Schiller (@Bernie14153) on CodePen.
padding
Padding (Innenabstand, englisch: Polsterung) ist ein erzwungener Leerraum zwischen dem Inhalt eines Elements und seinem eigenen Elementrand, also z.B. zwischen dem Text eines Elements und dem Rand dieses Elements. Sinnvoll ist die padding-Eigenschaft für alle HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, div oder pre. Sinnvoll sind die Angaben zum Innenabstand ferner, wenn außerdem CSS-Eigenschaften für Rahmen oder für Farben oder Grafiken zum Hintergrund eines Elements notiert werden. Denn erst dann werden die Abstände zwischen Elementgrenze und Elementinhalt richtig sichtbar.
Mit padding kann der Abstand für oben (padding-top), rechts (padding-right), unten (padding-bottom) und links (padding-left) bestimmt werden. Erlaubt sind ein bis vier nicht negative numerische Längenmaße.
- Eine Angabe: für alle 4 Abstände gilt derselbe Wert
- Zwei Angaben: 1. Wert für padding-top und padding-bottom, 2. Wert für padding-left und padding-right
- Drei Angaben: 1. Wert für padding-top, 2. Wert für padding-left und padding-right, 3. Wert für padding-bottom
- Vier Angaben: 1. Wert für padding-top, 2. Wert für padding-right, 3. Wert für padding-bottom, 4. Wert für padding-left (Merkhilfe: Uhrzeigerbewegung)
Achtung: Die Werte werden durch Leerzeichen, nicht durch Kommata getrennt, z.B. padding: 10px 5px
border
Die border-Eigenschaft legt den kompletten Rahmen eines Elementes fest und ist eine Kurzform für border-color, border-style und border-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden. Unterschiedliche Einstellungen für den oberen, unteren, linken und rechten Rahmen können nur unter den Kurzformen border-bottom, border-top, border-left und border-right festgelegt werden. Mit der Eigenschaft border-style kann man verschiedene Schmuckrahmen definieren.
See the Pen 28ae5cbf3a8355ec9550ed059c6d71fe by Bernd Schiller (@Bernie14153) on CodePen.
Zur Vertiefung
margin
Außenrand oder -abstand (margin) ist ein erzwungener Leerraum zwischen dem aktuellen Element und seinem Eltern- bzw. seinen Nachbarelementen. Für ein p-Element, das direkt innerhalb des body-Elements notiert ist, kennzeichnen Angaben zu linkem und rechtem Außenrand seinen Abstand zu den Elementgrenzen des body-Elements. Wenn mehrere solcher Absätze aufeinander folgen, markieren Angaben zum Außenrand oben und unten den Abstand zwischen den Absätzen.
See the Pen 770893850cc65188ba3e346d21262246 by Bernd Schiller (@Bernie14153) on CodePen.
Zur Vertiefung
overflow
Normalerweise sollte die Größe eines Elements so gewählt sein, dass der anzuzeigende Inhalt sichtbar dargestellt wird. Alle Browser stellen ohne weitere Angaben die Elemente auch entsprechend dar. Wenn der Viewport nicht ausreicht, werden Scrollleisten eingeblendet. Die Eigenschaft overflow ermöglicht es, Inhalte größer als das Element zu machen oder den Platz für den Inhalt eines Elements zu beschränken. Damit die Inhalte trotzdem erreichbar sind, kann man bestimmen, ob Scrollbalken erscheinen sollen.
Zur Vertiefung
Der Box-Hintergrund
Die einfachste Art, den Box-Hintergrund zu gestalten, ist die Zuweisung einer Hintergrundfarbe mittels der Eigenschaft background-color. In CSS stehen mehrere Möglichkeiten zur Verfügung, um Farbwerte zu notieren. Keine dieser Farbangaben hat irgendwelche Vor- oder Nachteile, so dass die Wahl der Farbangabe Geschmackssache ist. Man kann die Farbe unter anderem als Farbwörter (z.B red), im Hexadezimalcode (#FF0000), oder als rgb-Wert (rgb(255,0,0)) angeben.
Neu mit CSS3 wurde die CSS-Funktion rgba() hinzugefügt, mit der die gewöhnliche rgb()-Funktion um einen vierten Wert, den Alphawert für Transparenz, erweitert wird. Mit diesem Wert kann man die Transparenz für die Farbe angeben. Der Wert 0.0 bedeutet vollständige Transparenz, und der Wert 1.0 steht für vollständige Deckkraft und entspräche der Funktion rgb().
Eine weitere Möglichkeit der Hintergrundgestaltung ist das Einfügen einer Hintergrundgrafik mittels der Eigenschaft background-image. Macht man keine spezielle Angaben, wird die Hintergrundgrafik vertikal und horizontal so oft wiederholt (oder auch gekachelt), wie Platz zur Verfügung steht. Dieses Verhalten lässt sich mit der Eigenschaft background-repeat auch nach Wunsch steuern. Mit der Eigenschaft background-position lässt sich auch die Position der Grafik genauer festlegen.
Neu in CSS3 ist auch die Möglichkeit, Farbverläufe umzusetzen, ohne dass eine Hintergrundgrafik eingefügt werden muss. Dies geschieht mit den Werten linear-gradient bzw. radial-gradient für die Eigenschaft background.
See the Pen b52546ce0c120f9a148d509e478d5c19 by Bernd Schiller (@Bernie14153) on CodePen.
Zur Vertiefung
Das neue alternative Box-Modell von CSS3
box-sizing
Mit der Eigenschaft box-sizing kann man bestimmen, worauf sich Angaben zu den Abmessungen eines Elementes beziehen. Die ursprüngliche Definition, die Angaben von width und height als Abmessungen lediglich des Inhaltes festzulegen (ohne Berücksichtigung von padding und border) ist wenig intuitiv. Eigentlich erwartet man, dass eine Breiten- bzw. Höhenangabe den gesamten Platzbedarf des Elementes widerspiegelt. Zudem ist es schwierig bis unmöglich, ein responsives Layout, d.h. ein Layout, das sich flexibel an verschiedene Endgeräte und ihre Darstellungsweise anpasst, zu erstellen, welches etwa prozentuale Breitenangaben mit pixelgenauen Angaben für die Rahmenbreite kombiniert
In CSS3 wurde eine neue Eigenschaft namens box-sizing geschaffen. Wenn man einem Element die Eigenschaft box-sizing: border-box; gibt, werden die Werte von padding und border nicht mehr der Breite hinzugerechnet. Will man das klassische Modell verwenden, kann man dies mit box-sizing: content-box; erreichen und relativ neu ist die Eigenschaft box-sizing: padding-box;, die man für die Kombination width bzw. height und Innenabstand verwenden kann.
See the Pen 157030a4bcdbdc2fec97be33643c2db3 by Bernd Schiller (@Bernie14153) on CodePen.
Zwei weitere CSS3-Eigenschaften haben das Arbeiten für Webentwickler merklich vereinfacht. Musste man für Schattenwürfe und abgerundete Ecken zum Verschönern des Designs früher einiges an Arbeit in Photoshop investieren, lässt sich der Arbeitsaufwand heute mit den Eigenschaften box-shadow bzw. border-radius deutlich verringern.
box-shadow
CSS box-shadow erzeugt einen oder mehrere Schlagschatten (auch »Drop-Shadow«) für einen HTML-Block. box-shadow kann für so ziemlich alles angesetzt werden, was eine Box bildet: auf div-Elemente, auf Texte und auf Tabellen. Der Schatten wird nur außerhalb oder innerhalb des Elements gerendert, auch wenn das Element semitransparent ist. box-shadow beeinflußt das Layout und die Position benachbarter Elemente nicht, kann sich aber über bzw. unter benachbarte Elemente legen.
See the Pen fa86063feefcc108f07ca168fc96a9f2 by Bernd Schiller (@Bernie14153) on CodePen.
border-radius
Für runde Ecken von Elementen kann die Eigenschaft border-radius verwendet werden. Diese CSS3-Eigenschaft kann unabhängig von border verwendet werden. Man muss also nicht unbedingt einen Rahmen zeichnen um die Ecken abzurunden. Die Ecken können auch einzeln abgerundet werden (siehe Beispiel). Auch auf Bilder lässt sich die Eigenschaft sehr schön anwenden.
See the Pen 0001dac1026b7609f7366587737f37fb by Bernd Schiller (@Bernie14153) on CodePen.
Zur Vertiefung
Aufgabe
Die erste Aufgabe ist sehr frei gehalten und soll Gelegenheit geben, mit dem bisher Gelernten zu experimentieren. Der unten vorgegebene html-Code darf nicht verändert werden und die Formatierung erfolgt ausschließlich durch das Stylesheet, in dem die CSS-Regeln angegeben werden. Das Aussehen ist allein dem eigenen Geschmack überlassen. Hinweis: Der "wrapper" ermöglicht mit Hilfe der CSS-Regeln #wrapper {width: 960px; margin: 0 auto;} die Zentrierung des Inhalts auf der Darstellungsfläche. Um stimmige Farbschemata zu erhalten empfiehlt sich die Nutzung eines Tools wie z.B. Adobe Kuler.
Code zum Kopieren
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"/> <title>Aufgabe Boxmodell</title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <div id="wrapper"> <h1>Übungsaufgabe Boxmodell</h1> <div id="box1"> <h2>Box Nummer 1</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div id="box2"> <h2>Box Nummer 2</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div id="box3"> <h2>Box Nummer 3</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> </body> </html>