CSS
Das Boxmodell

Syntax

• Box-Dimensionierung: Parameter ;

Parameter

Bemerkungen

Was ist das Boxmodell?

Die Kanten

Der Browser erstellt für jedes Element im HTML-Dokument ein Rechteck. Das Rahmenmodell beschreibt, wie die Auffüllung, der Rand und der Rand zum Inhalt hinzugefügt werden, um dieses Rechteck zu erstellen.

Diagramm aus CSS2.2 Arbeitsentwurf

Der Umfang jedes der vier Bereiche wird als Kante bezeichnet . Jede Kante definiert eine Box.

• Das innerste Rechteck ist das Inhaltsfeld . Die Breite und Höhe davon hängt vom gerenderten Inhalt des Elements ab (Text, Bilder und alle untergeordneten Elemente).
• Als nächstes folgt die Auffüllbox , wie sie durch die padding Eigenschaft definiert wird. Wenn keine padding definiert ist, entspricht die Auffüllkante der Inhaltskante.
• Dann haben wir die Grenze Box, wie sie in der definierten border Eigenschaft. Wenn es keine border definiert ist , ist die Randkante an den Polsterrand gleich.
• Die äußerste Rechteck ist das Randfeld , wie durch die definierten margin Eigenschaft. Wenn keine margin definiert ist, entspricht die Randkante der Randkante.

Beispiel

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

Dieses CSS formatiert alle div Elemente so, dass sie einen oberen, rechten, unteren und linken Rand mit 5px Breite von 5px . ein oberer, rechter, unterer und linker Rand von 50px ; und eine obere, rechte, untere und linke Polsterung von 20px . Wenn Sie den Inhalt ignorieren, wird unsere generierte Box folgendermaßen aussehen:

Screenshot des Bedienfelds Elementstile von Google Chrome

• Da es keinen Inhalt gibt, hat der Inhaltsbereich (das blaue Kästchen in der Mitte) keine Höhe oder Breite (0px zu 0px).
• Die Polsterung Box standardmäßig ist die gleiche Größe wie die Content - Box sowie die 20px Breite an allen vier Kanten oben mit dem wir definieren padding Eigenschaft (40px von 40px).
• Das Rahmenfeld hat dieselbe Größe wie das Füllfeld, zuzüglich der 5px-Breite, die wir oben mit der border Eigenschaft definieren (50px zu 50px).
• Schließlich hat das Randfeld die gleiche Größe wie das Rahmenfeld, zuzüglich der 50px-Breite, die wir oben mit der margin Eigenschaft definieren (wodurch unser Element eine Gesamtgröße von 150px zu 150px hat).

Jetzt geben wir unserem Element ein Geschwister mit demselben Stil. Der Browser betrachtet das Box-Modell beider Elemente, um herauszufinden, wo das neue Element in Bezug auf den Inhalt des vorherigen Elements positioniert werden soll:

Der Inhalt jedes Elements ist durch eine Lücke von 150 Pixel getrennt, aber die Kästchen der beiden Elemente berühren sich.

Wenn wir dann unser erstes Element so anpassen, dass es keinen rechten Rand hat, befindet sich der rechte Rand an derselben Position wie der rechte Rand, und unsere beiden Elemente würden jetzt so aussehen:

Box-Sizing

Das Standard - Box - Modell ( content-box ) kann kontraintuitiv sein, da die width / height für ein Element nicht seine tatsächliche Breite oder Höhe auf dem Bildschirm darstellen wird, sobald Sie anfangen , das Hinzufügen padding und border Stile an das Element.

Das folgende Beispiel veranschaulicht dieses potenzielle Problem mit der content-box :

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

Da der Abstand zur Breite des Textbereichs hinzugefügt wird, ist das resultierende Element ein Textbereich, der breiter als 100% ist.

Glücklicherweise ermöglicht CSS es uns, das Boxmodell mit der box-sizing Eigenschaft für ein Element zu ändern. Es gibt drei verschiedene Werte für die Eigenschaft:

• content-box : Das allgemeine Boxmodell - Breite und Höhe enthält nur den Inhalt, nicht die Auffüllung oder den Rand

• padding-box : Breite und Höhe umfassen den Inhalt und die Füllung, nicht jedoch den Rand

• border-box : Breite und Höhe umfassen den Inhalt, die Auffüllung sowie den Rand

Um das obige textarea Problem zu lösen, können Sie einfach die Eigenschaft " box-sizing in " padding-box oder " border-box ändern. border-box wird am häufigsten verwendet.

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

Um ein bestimmtes Box-Modell auf jedes Element auf der Seite anzuwenden, verwenden Sie das folgende Snippet:

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

In dieser Codierungsbox box-sizing:border-box; wird nicht direkt auf * angewendet, sodass Sie diese Eigenschaft leicht für einzelne Elemente überschreiben können.