Das Box-Modell

Das Box-Modell umfasst den Satz von Eigenschaften, die Teile eines Elements definieren, die Platz auf einer Webseite beanspruchen. Das Modell umfasst die Größe des Inhaltsbereichs (Breite und Höhe) sowie den Abstand, den Rand und den Rand des Elements.

Zu den Eigenschaften gehören:

1.  with und height : Die Breite und Höhe des Inhaltsbereichs.

2. padding : Der Abstand zwischen dem Inhaltsbereich und dem Rand.

3. border : Die Dicke und der Stil des Rahmens, der den Inhaltsbereich umgibt, und die Polsterung.

4. margin : Der Abstand zwischen dem Rand und der Außenkante des Elements.

Der Inhalt eines Elements hat zwei Dimensionen: eine Höhe und eine Breite. Standardmäßig sind die Abmessungen eine HTML-Box so eingestellt, dass sie den Rohinhalt der Box aufnehmen.

Mit den CSS-Eigenschaften height und width können diese Standardabmessungen geändert werden.

Ein Rand ist eine Linie, die ein Element umgibt, wie ein Rahmen um ein Gemälde.

Ränder können mit einer bestimmten width (Breite), einem bestimmten style (Stil) und einer bestimmten color (Farbe) festgelegt werden:

• width - Die Dicke des Rahmens. Die Dicke eines Rahmens kann in Pixeln oder mit einem der folgenden Schlüsselwörter festgelegt werden: thin (dünn), medium (mittel) oder thick (dick).

• style - Das Design der Umrandung. Webbrowser können jeden von 10 verschiedenen Stilen darstellen. Einige dieser Stile umfassen: none (keine), dotted (gepunktet) und solid (einfarbig).

• color - Die Farbe des Rahmens. Webbrowser können Farben in verschiedenen Formaten wiedergeben, darunter 140 integrierte Farbschlüsselwörter.

Im obigen Beispiel hat der Rahmen eine Breite von 3 Pixeln, den Stil "Vollton" und die Farbe "coral". Alle drei Eigenschaften werden in einer Codezeile festgelegt.

Der Standardrahmen ist medium (mittel), none color (keine Farbe), wobei Farbe die aktuelle Farbe des Elements ist. Wenn Breite, Stil oder Farbe nicht in der CSS-Datei festgelegt sind, weist der Webbrowser den Standardwert für diese Eigenschaft zu.

Seit wir die Ränder von Kästchen enthüllt haben, ist uns aufgefallen, dass die Ränder die wahre Form des Kästchens eines Elements quadratisch sind. Dank CSS muss ein Rahmen nicht quadratisch sein.

Mit der Eingenschaft border-radius können wir die Ecken des Rahmens eines Elements ändern.

Der Code im obigen Beispiel stellt alle vier Ecken des Rahmens auf einen Radius von 5 Pixeln ein (d.h. die gleiche Krümmung, die ein Kreis mit einem Radius von 5 Pixeln hätte).

Wir können einen Rahmen erstellen, der einem perfekten Kreis entspricht, indem wir zunächst ein Element mit derselben Breite und Höhe erstellen und dann den Radius auf die halbe Breite des Felds, also 50% einstellen.

Der Abstand zwischen dem Inhalt einer Box und den Rändern einer Box wird als Polsterung bezeichnet. Polsterung ist wie der Raum zwischen einem Bild und dem eines umgebenden Rahmens. In CSS können wir diesen Raum mit der padding Eigenschaft ändern.

Der Code in diesem Beispiel fügt auf allen vier Seiten einen Abstand von 10 Pixeln zwischen dem Inhalt des Absatzes (dem Text) und den Rändern ein.

Die Eigenschaft "padding" wird häufig verwendet, um die Hintergrundfarbe zu erweitern und den Inhalt weniger beengt erscheinen zu lassen.

Wenn wir den Abstand auf jeder Seite des Inhalts einer Box genauer bestimmen möchten, können wir die folgenden Eigenschaften verwenden:

• padding-top (Polsterung oben)

• padding-right (Polsterung rechts)

• padding-bottom (Polsterung unten)

• padding-left (Polsterung links)

Jede Eigenschaft wirkt sich nur auf die Polsterung auf einer Seite des Boxinhalts aus, wodurch wir mehr Flexibilität bei der Anpassung erhalten.

Mit einer weiteren Implementierung der Eigenschaft "padding" können wir in einer einzelnen Deklaration genau angeben, wie viel Auffüllung auf jeder Seite des Inhalts vorhanden sein soll. Eine Deklaration, die mehrere Eigenschaften als Werte verwendet, wird als Abkürzungseigenschaft bezeichnet.

Mit der Padding-Kurzform können wir alle Padding-Eigenschaften als Werte in einer einzigen Zeile angeben:

• padding-top

• padding-right

• padding-bottom

• padding-left

Wir können diese Eigenschaften auf verschiedene Arten angeben:

4 Werte

Im obigen Beispiel entsprechen die vier Werte 6px, 11px, 4px und 9px der Auffüllung auf jeder Seite bei Drehung im Uhrzeigersinn. Der Reihenfolge nach werden der Wert für den oberen Abstand (6 Pixel), der Wert für den rechten Abstand (11 Pixel), der Wert für den unteren Abstand (4 Pixel) und der Wert für den linken Abstand (9 Pixel) des Inhalts angegeben.

3 Werte

Wenn die linke und rechte Seite des Inhalts gleich sein können, ermöglicht die Kurzschrifteigenschaft "padding" die Angabe von drei Werten. Der erste Wert legt den Padding-Top-Wert (5 Pixel) fest, der zweite Wert legt die Padding-Left und Padding-Right-Werte (10 Pixel) fest und der dritte Wert legt den Padding-Bottom-Wert (20 Pixel) fest.

2 Werte

Bisher haben wir die folgenden Komponenten des Boxmodells kennengelernt: Inhalt, Ränder und Polsterung. Die vierte und letzte Komponente des Boxmodells ist der Rand.

Der Rand bezieht sich auf den Raum direkt außerhalb der Box. Die margin Eigenschaft wird verwendet, um die Größe dieses Raums anzugeben.

Der Code im obigen Beispiel platziert 20 Pixel Platz außerhalb des Absatzfeldes auf allen vier Seiten. Dies bedeutet, dass andere HTML-Elemente auf der Seite nicht näher als 20 Pixel an das Feld des Absatzes herankommen können.

Wenn wir den Rand auf jeder Seite einer Box genauer festlegen möchten, können wir die folgenden Eigenschaften verwenden:

• margin-top

• margin-right

• margin-bottom

• margin-left

Jede Eigenschaft wirkt sich nur auf den Rand einer Seite des Felds aus und bietet so mehr Flexibilität bei der Anpassung.

Was ist, wenn wir nicht auf allen vier Seiten der Box gleiche Ränder haben wollen?

Margin kann auch als Kurzform für eine Eigenschaft geschrieben werden. Die Kurzform für Margin ist dieselbe wie die für Polsterung.

Ähnlich wie bei der Polsterungskurzschrift können wir mit der Randkurzschrift alle margin Eigenschaften als Werte in einer einzigen Zeile angeben:

• margin-top

• margin-right

• margin-bottom

• margin-left

Wir können diese auch wie bei der Polsterung auf diese Arten angeben:

4 Werte

Im obigen Beispiel entsprechen die vier Werte 6px 10px 5px 12px der Dicke des Rands auf jeder Seite, im Uhrzeigersinn gedreht. In der Reihenfolge werden der obere Randwert (6px), der rechte Randwert (10px), der untere Randwert (5px) und der linke Randwert (12px) des Inhalts angegeben.

3 Werte

Wenn die linke und rechte Seite des Inhalts gleich sein können, können mit der Abkürzungseigenschaft "margin" drei Werte angegeben werden. Der erste Wert legt den oberen Randwert (5px) fest, der zweite Wert legt die linken und rechten Ränder (12px) fest und der dritte Wert legt den unteren Randwert (4px) fest.

2 Werte

Mit dieser margin Eigenschaft können wir Inhalte auch zentrieren. Wir müssen jedoch einige Syntaxanforderungen beachten. Sehen wir uns das folgende Beispiel an:

Wie wir gesehen haben ist padding der Platz der innerhalb des Randes eines Elements hinzugefügt wird, während Margen der Platz ist, der außerhalb des Randes eines Elements hinzugefügt wird. Ein weiterer Unterschied besteht darin, dass der obere und untere Rand, auch vertikale Ränder genannt, reduziert werden, während dies beim oberen und unteren Abstand nicht der Fall ist.

Horizontale Ränder (links und rechts) werden wie der Innenabstand immer angezeigt und addiert. Wenn beispielsweise zwei Divs mit den IDs #div-one und #div-two nebeneinander liegen, sind sie so weit voneinander entfernt wie die Summe ihrer benachbarten Ränder.

In diesem Beispiel beträgt der Abstand zwischen den Rändern #img-one und #img-two 40 Pixel. Der rechte Rand von #img-one (20px) und der linke Rand von #img-two (20px) ergeben zusammen einen Gesamtrand von 40 Pixeln.

Im Gegensatz zu horizontalen Rändern addieren sich vertikale Ränder nicht. Stattdessen legt der größere der beiden vertikalen Ränder den Abstand zwischen benachbarten Elementen fest.

In diesem Beispiel beträgt der vertikale Abstand zwischen den Elementen #img-one und #img-two 30 Pixel. Obwohl die Summe der Ränder 50 Pixel beträgt, verringert sich der Rand, sodass der Abstand nur vom unteren Rand #img-one abhängt.

Es kann hilfreich sein, sich zusammenbrechende vertikale Ränder als eine kleine Person vorzustellen, die versucht, eine größere Person zu stoßen. Die große Person hat längere Arme und kann die kleine Person leicht schieben, während die Person mit kurzen Armen die Person mit langen Armen nicht erreichen kann.

Da eine Webseite auf Displays mit unterschiedlicher Bildschirmgröße angezeigt werden kann, kann der Inhalt der Webseite unter diesen Größenänderungen leiden. Um dieses Problem zu vermeiden, bietet CSS zwei Eigenschaften, die die Größe der Box eines Elements begrenzen können:

• min-width - diese Eigenschaft stellt eine Mindestbreite der Box eines Elements sicher.

• max-width - diese Eigenschaft stellt die maximale Breite der Box eines Elements sicher.

Im obigen Beispiel wird die Breite aller Absätze weder unter 300 Pixel schrumpfen noch 600 Pixel überschreiten.

Inhalte wie Texte können schwer lesbar werden, wenn ein Browserfenster verengt oder vergrößert wird. Diese beiden Eigenschaften stellen sicher, dass Inhalte lesbar sind, indem sie die Mindest- und Maximalbreite eines Elements begrenzen.

Sie können auch die minimale und maximale Höhe eines Elements begrenzen:

• min-height - Diese Eigenschaft stellt eine Mindesthöhe für die Box eines Elements sicher.

• max-height - Diese Eigenschaft stellt eine maximale Höhe der Box eines Elements sicher.

Alle Komponenten des Boxmodell umfassen die Größe eines Elements. Ein Bild mit den folgenden Abmessungen ist beispielsweise 364 Pixel breit und 244 Pixel hoch.

• 300 Pixel breit

• 200 Pixel hoch

• 10 Pixel Polsterung links und rechts

• 2 Pixel Grenze links und rechts

• 2 Pixel Rand oben und unten

• 20 Pixel Marge links und rechts

• 10 Pixel Rand oben und unten

Die Gesamtabmessungen (364 x 244 Pixel) werden berechnet, indem alle vertikalen und horizontalen Abmessungen zusammengerechnet werden. Manchmal ergeben diese Komponenten ein Element, das größer ist als der enthaltene Bereich des übergeorndetem Elements.

Wie können wir sicherstellen, dass wir ein Element, das größer als der enthaltene Bereich seines übergeorndeten Elements ist, vollständig anzeigen können?

Die  overflow Eigenschaft steuert, was mit Inhalt geschieht, der über den Rahmen hinausläuft. Die am häufigsten verwendeten Werte sind:

• hidden - Wenn dieser Wert eingestellt ist, wird jeglicher überlaufender Inhalt ausgeblendet.

• scroll - Wenn dieser Wert eingestellt ist, wird dem Feld des Elements eines Billaufleiste hinzugefügt, sodass der restliche Inhalt durch Scrollen angezeigt werden kann.

• visible - Wenn dieser Wert eingestellt ist, wird der Überlaufinhalt außerhalb des enthaltenen Elements angezeigt. Beachten wir auch das dies der Standardwert ist.

Alle gängigen Webbrowser verfügen über ein Standard-Stylesheet, das sie verwenden, wenn kein externes Stylesheet vorhanden ist. Diese Standard-Stylesheets werden als User-Agent-Stylesheets bezeichnet. In diesem Fall ist der Begriff User-Agent ein technischer Begriff für den Browser.

User-Agent-Stylesheets haben oft Standard-CSS-Regeln, die Standardwerte festlegen für Polsterung und Marge. Dies wirkt sich darauf aus, wie der Browser HTML-Elemente anzeigt, was es für einen Entwickler schwierig machen kann, eine Webseite zu entwerfen oder zu gestalten.

Viele Entwickler entscheiden sich dafür, diese Standardwerte zurückzusetzten, damit sie wirklich mit einer leeren Tafel arbeiten können.

Elemente können ausgeblendet werden mit dem visibility Eigentum.

Die visibility Eigenschaft kann auf einen der folgenden Werte gesetzt werden:

• hidden - verbirgt ein Element.

• visible - zeigt ein Element an.

• collapse - reduziert ein Element.