CSS-Framework

CSS-Framework

Alle HTML-Elemente können als Kästen betrachtet werden. In CSS wird der Begriff „Box-Modell“ oder „Kastenmodell“ verwendet, wenn es um Design und Layout geht.

Das CSS-Rastermodell ist im Wesentlichen ein um jedes HTML-Element liegender Rahmen. Es umfasst: Außenabstand, Umrandung, Innenabstand und den tatsächlichen Inhalt. Das Diagramm zeigt das Rastermodell:

CSS-Framework

Beschreibung der verschiedenen Teile:

  • Inhalt - Der Inhalt des Rahmens, in dem Text und Bilder angezeigt werden.
  • Innenabstand - Entfernen Sie den Bereich um den Inhalt. Der Innenabstand ist transparent.
  • Umrandung - Um den Rand des Innenabstands und des Inhalts herum.
  • Außenabstand - Entfernen Sie den Bereich außerhalb der Grenzen. Der Außenabstand ist transparent.

Das Rastermodell ermöglicht es uns, Umrandungen um Elemente hinzuzufügen und den Raum zwischen Elementen zu definieren.

Der innere Teil des Elements ist der tatsächliche Inhalt, der direkt den Inhalt umgibt, ist der Innenabstand. Der Innenabstand stellt den Hintergrund des Elements dar. Der Rand des Innenabstands ist die Umrandung. Darüber hinaus ist der Außenabstand, der standardmäßig transparent ist und daher keine anderen Elemente verdeckt.

Tipp:Hintergrund wird auf den Bereich angewendet, der aus Inhalt und Innenabstand, Umrandung besteht.

Innenabstand, Umrandung und Außenabstand sind optional, der Standardwert ist null. Viele Elemente werden jedoch durch das Benutzeragentenstilsheet mit Außenabstand und Innenabstand festgelegt. Diese können auf null gesetzt werden, um diese Browserstile zu überschreiben. Dies kann getrennt oder mit einem universellen Selektor für alle Elemente erfolgen:

* {
  margin: 0;
  padding: 0;
}

In CSS beziehen sich width und height auf die Breite und Höhe des Inhaltbereichs. Der Hinzufügen von Innenabstand, Umrandung und Außenabstand beeinflusst nicht die Größe des Inhaltbereichs, sondern erhöht die Gesamtgröße des Elements.

Angenommen, jeder Rand des Rahmens hat 10 Pixel Außenabstand und 5 Pixel Innenabstand. Wenn Sie möchten, dass dieser Elementrahmen 100 Pixel erreicht, müssen Sie die Breite des Inhalts auf 70 Pixel setzen. Sehen Sie sich das Diagramm an:

CSS-Framework-Beispiel 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Tipp:Innenabstand, Umrandung und Außenabstand können auf alle Seiten eines Elements angewendet werden oder nur auf eine einzelne Seite.

Tipp:Die Außenabstände können negativ sein und in vielen Fällen sind negative Außenabstände erforderlich.

Beispiel

Demonstration des Rastermodells:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Try it yourself

Breite und Höhe des Elements

Um die Breite und Höhe eines Elements in allen Browsern korrekt zu setzen, müssen Sie verstehen, wie das Rastermodell funktioniert.

Wichtige Information:Wenn Sie die width- und height-Attribute eines Elements mit CSS einstellen, müssen Sie nur die Breite und Höhe des Inhaltbereichs festlegen. Um die vollständige Größe des Elements zu berechnen, müssen Sie auch den Innenabstand, die Umrandung und den Abstand hinzufügen.

Beispiel

<div>-Element breitet sich auf 350px aus:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

Try it yourself

Calculation as follows:

320px (width)
+ 20px (left + right inner padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of the element should be calculated as follows:

Total width of element = width + left inner padding + right inner padding + left border + right border + left margin + right margin

The total height of the element should be calculated as follows:

Total height of element = height + top inner padding + bottom inner padding + top border + bottom border + top margin + bottom margin