#Neuigkeiten

Übersetzungen von Artikeln, meine Notizen und Beobachtungen

#CSS-1: Blockmodell

von Rashid Bairamov

Alles ist ein Rechteck.

Jedes Element auf einer Webseite ist ein Rechteck, dem Browser während der Darstellung CSS-Eigenschaften zuweisen. Um sicherzustellen, dass die endgültigen Größen der Elemente keine Überraschung für Sie sind und Sie genau verstehen, woraus sie bestehen, ist es wichtig, sich mit einem der grundlegenden Layout-Konzepte vertraut zu machen - dem Blockmodell.

Die Blockmodell, auch Box-Modell genannt, ist ein Algorithmus zur Berechnung der Größen jedes einzelnen Elements auf der Seite, den Browser während der Darstellung verwenden. Um genau zu verstehen, wie der Block letztendlich aussehen wird und wie viel Platz er einnehmen wird, behalten Sie das folgende Bild im Kopf:

Genau das gleiche Schema, jedoch in anderen Farben, können Sie in den Entwicklertools eines beliebigen Browsers sehen. Zum Beispiel sieht das Blockmodell eines Elements in Chrome so aus:

Die Blockmodell besteht aus mehreren CSS-Eigenschaften, die die Größen eines Elements beeinflussen:

  • width - Die Breite des Elements;
  • height - Die Höhe des Elements;
  • padding - Der Innenabstand zwischen dem Inhalt und den Rändern des Elements;
  • border - Der Rahmen, der den Rand des Elements umgibt;
  • margin - Der Außenabstand um das Element herum.

Breite und Höhe

Mit den Eigenschaften "width" und "height" können Sie die Größe des Inhaltsbereichs eines Blocks festlegen.

Der Inhaltsbereich bezeichnet den fiktiven inneren Raum eines Blocks, in dem sich der Inhalt befindet. Im folgenden Beispiel erstellen wir einen Block mit dem <div>-Tag und fügen Inhalte - Text - hinzu:

<div>
  Zusammen ist es lustig, durch die Weiten zu schreiten!
</div>

Standardmäßig nehmen Blockelemente (display: block) die gesamte Breite des übergeordneten Elements ein, es sei denn, es wird explizit etwas anderes angegeben. Die Höhe des Elements passt sich jedoch dem Inhalt an.

Elemente mit inline (display: inline) oder inline-block (display: inline-block) Anzeigen passen standardmäßig sowohl die Breite als auch die Höhe an den verschachtelten Inhalt an. Jedoch können inline-block-Elementen beliebige Größen zugewiesen werden: Breite (width) und Höhe (height).

Wenn ein Element mehr Platz einnehmen soll als der darin enthaltene Inhalt, können wir seine Breite und Höhe nach Belieben ändern. Hier sind die Styles für das obige Beispiel:

div {
  width: 200px;
  height: 200px;
}

Jetzt wird das Element eine Größe von 200 mal 200 Pixel haben.

Padding

ist ein Begriff aus der Webentwicklung, der sich auf den inneren Abstand eines Elements bezieht. Im Kontext des Box-Modells ist es wichtig zu beachten, dass standardmäßig der innere Abstand zur Breite und Höhe des Elements hinzugefügt wird.

Lassen Sie uns dem oben genannten Beispiel einige innere Abstände hinzufügen:

div {
  width: 200px;
  height: 200px;
  padding: 25px 15px;
}

Jetzt wird die Breite des Blocks 200 + 15 + 15 = 230 Pixel betragen. Die Höhe wird 200 + 25 + 25 = 250 Pixel sein. Die inneren Abstände wurden zur Breite und Höhe hinzugefügt.

border

Das "border" ist ein CSS-Attribut, das für die Gestaltung der Rahmen eines Elements zuständig ist.

Lassen Sie uns dem Element im obigen Beispiel einen Rahmen auf allen Seiten hinzufügen:

div {
  width: 200px;
  height: 200px;
  padding: 25px 15px;
  border: 5px solid hotpink;
}

Nun werden die endgültigen Maße des Elements sein:

200 + 15 + 15 + 5 + 5 = 240 Pixel in der Breite
200 + 25 + 25 + 5 + 5 = 260 Pixel in der Höhe

margin

ist ein CSS-Attribut, das für den äußeren Abstand eines Elements zuständig ist. Diese Abstände werden nicht direkt zu den Abmessungen des Elements hinzugefügt, beeinflussen jedoch den Platz, den das Element auf der Seite einnimmt.

Wenn wir unserem Beispiel-Element äußere Abstände hinzufügen, wird es mehr Platz einnehmen und gleichzeitig seine Nachbarn verschieben:

div {
  width: 200px;
  height: 200px;
  margin: 50px;
  padding: 25px 15px;
  border: 5px solid hotpink;
}

box-sizing

ist ein CSS-Attribut, das das Verhalten des Browsers in Bezug auf die Berechnung der Größe eines Elements beeinflusst. Standardmäßig berechnen Browser die Größe eines Elements, indem sie die Breite und Höhe um die inneren Abstände und Rahmen erweitern, wie oben beschrieben. Dies kann zu unerwarteten Ergebnissen führen, wenn ein Element in der Layoutgestaltung mehr Platz einnimmt als erwartet.

Wir können das Standardverhalten ändern und dem Browser mitteilen, dass die in CSS angegebenen Breite und Höhe auch die inneren Abstände und Rahmen enthalten sollen. Dies wird durch das "box-sizing" -Attribut erreicht.