Boxmodell in CSS | Erklärt

CSS, ein Akronym des Cascading Style Sheet, wird verwendet, um HTML -Elemente zu stylen, und jeder Inhalt, den Sie auf einer Webseite sehen, ist ein Element in HTML E.G Text, Symbole, Schaltflächen und Bilder. Jedes Element verbraucht etwas Platz auf der Webseite und der von dem HTML -Element besetzte Raum wird als Feld dieses Elements bezeichnet. Das Boxmodell kann als der Bereich dargestellt werden, der vom HTML -Element besetzt ist, das weiter aus mehreren Eigenschaften wie Polsterung, Marge und Grenzen besteht.

Diese Beschreibung bietet eine Schritt-für-Schritt-Anleitung zum Verständnis des CSS-Box-Modells. Mit Hilfe von Beispielen lernen wir jede der unten beschriebenen Eigenschaften im Detail im Detail:

• Inhaltsbereich im Boxmodell
• Polsterung im Boxmodell
• Grenzen im Boxmodell
• Rand im Boxmodell

Lassen Sie uns also ohne Verzögerung fortfahren!

Inhaltsbereich im Boxmodell

Inhalt ist einer der wichtigsten Teile des Boxmodells, mit dem Text, Bilder usw. angezeigt werden., und der für die Anzeige des Inhalts erforderliche Speicherplatz wird als Inhaltsbereich bezeichnet. Der Inhaltsbereich kann mit der Änderung der Größe verwendet werden Höhe und Breite Eigenschaften.

Es ist in der Mitte des Boxmodells vorhanden und in der folgenden Abbildung als blauer Bereich hervorgehoben:

Polsterung im Boxmodell

Polsterung ist nichts anderes als der Raum um den Inhalt, es ist außerhalb des Inhalts und innerhalb des Grenzbereichs vorhanden. Wir können die Polsterung jeder Seite separat steuern oder die Polsterung aller Seiten gleichzeitig mit dem einstellen Polsterung Eigentum. Die Polsterung wird in der unten angegebenen Abbildung als grüner Bereich hervorgehoben:

Border in Box -Modell

Der Rand zeigt sich um die Polsterung und innerhalb des Randes. Grenzen können um jedes HTML -Element eingestellt werden. Wir können die Grenzeigenschaften für jede Seite i angeben.e. oben, links, rechts und unten mit dem Grenztope, Grenz-Links, Grenzrechte, Grenzbodeneigenschaften bzw. Wir können den gesamten Grenze gleichzeitig mithilfe von Verwendung einstellen Grenze Eigentum. Der Rand wird in der unten angegebenen Abbildung als gelbe Fläche hervorgehoben:

Rand im Boxmodell

Der Raum außerhalb der Grenze wird der Rand bezeichnet. Der Rand Die Eigenschaft legt den Rand auf jeder Seite einzeln oder als Ganzes fest. Der Rand wird in der folgenden genannten Abbildung als orangefarbener Bereich hervorgehoben:

Beispiel

Betrachten wir ein Beispiel, um das gesamte Konzept des Box -Modells zu verstehen:

Inhalt: Ein HTML -Element, das in der Mitte der Box vorhanden ist
Modell
Polsterung: Polsterung ist nichts anderes als der Raum um den Inhalt, es ist außerhalb des Inhalts und innerhalb des
Grenzgebiet
Grenzen: Die Grenze zeigt die Polsterung und innerhalb des Randes
Rand: Der Speicherplatz außerhalb des Grenzfensters heißt Rand

Der oben gegebene Snippet legt die Breite des Inhalts 500px, Höhe 100px, Rand 5px und Padding 10px fest. Daher wird die folgende Ausgabe angezeigt:

Das Lineal Redox wird verwendet, um die Höhe und Breite zu berechnen, es zeigt die Gesamtbreite von 530 und die Gesamthöhe entspricht 130.

So überprüfen Sie die Breite und Höhe des Boxmodells

Gesamtbreite = linke (linke (links) + links + linke Padding + Inhaltsbereichsbreite + rechts-Padding + rechts-grenzüberschreitend + rechte Marge
Width = 0px + 5px + 10px + 500px + 10px + 5px + 0px = 530px Gesamthöhe = Rand-Top + Border-Top + Padding-Top + Inhaltsgröße + Padding-Bottom + Border-Bottom + Rand-Bottom
Höhe = 0 + 5px + 10px + 100px + 10px + 5px + 0px = 130px

Abschluss

Das Box -Modell gibt das Design und das Layout jeder Webseite an, indem mehrere CSS -Eigenschaften wie Rand, Höhe, Breite, Margin und Polsterung verwendet werden. Dieses Bericht hat einen umfassenden Überblick über das CSS-Box-Modell gezeigt, in dem wir gelernt haben, wie das Box-Modell verwendet wird, um das Layout eines HTML-Elements anzupassen.