Nachdem Sie die Einführung des CSS-Boxmodells gelesen haben, werden Sie nicht verwirrt sein

Im Webdesign hört man oft die Eigenschaftsnamen „Inhalt“, „Auffüllung“, „Rahmen“, „Marge“. Das CSS-Boxmodell verfügt über alle diese Eigenschaften. Wir können diese Eigenschaften verstehen, indem wir einen alltäglichen Gegenstand – eine Schachtel – als Metapher verwenden. Daher nennt man das auch Schachtelmodell. Das CSS-Boxmodell ist ein Denkmodell der CSS-Technologie, das häufig im Webdesign eingesetzt wird.

Einführung

CSS (Cascading Style Sheet) kann als „Cascading Style Sheet“ oder „Cascading Style Sheet“ übersetzt werden. Es definiert, wie HTML-Elemente angezeigt werden und wird verwendet, um das Erscheinungsbild von Webseiten zu steuern. Durch die Verwendung von CSS zur Trennung von Inhalt und Präsentation der Seite wird die Arbeitseffizienz erheblich verbessert. CSS geht davon aus, dass alle HTML-Dokumentelemente eine rechteckige Elementbox generieren, die den vom Element im HTML-Dokumentlayout eingenommenen Raum beschreibt und im übertragenen Sinne als Box betrachtet werden kann. CSS hat rund um diese Boxen ein Konzept eines „Boxmodells“ entwickelt. Durch die Definition einer Reihe von Box-bezogenen Eigenschaften kann es die Leistung und Layoutstruktur jeder Box und sogar des gesamten HTML-Dokuments erheblich bereichern und verbessern. Wenn es für Boxelemente keine spezielle Einstellung gibt, belegen sie standardmäßig immer eine unabhängige Zeile und ihre Breite entspricht der Breite des Browserfensters. Die Elemente davor und danach, unabhängig davon, ob es sich um Boxen handelt oder nicht, können nur darüber oder darunter angeordnet werden, d. h. sie werden kumulativ nach oben und unten angeordnet. Jede Box in einem HTML-Dokument kann von innen nach außen als aus vier Teilen bestehend betrachtet werden, nämlich dem Inhaltsbereich (Content), der Polsterung (Padding), der Umrandung (Border) und dem Rand (Margin). CSS definiert eine Reihe verwandter Eigenschaften für die vier Teile. Durch Festlegen dieser Eigenschaften kann die Leistung der Box verbessert werden.

CSS-Boxmodell

In CSS können wir alle HTML-Elemente als Box betrachten. Wir können div als Beispiel nehmen. Im Browser-Inspektor können wir das Erscheinungsbild des Box-Modells auch intuitiver beobachten, wie in der Abbildung gezeigt:

1. Die Zusammensetzung des Boxmodells:

Inhaltsbereich: Inhalt (der blaue Bereich in der Mitte des Bildes)
Polsterung (violetter Bereich im Bild)
Rand: Rand (grauer Bereich im Bild)
Rand: Rand (gelber Bereich)

Beachten Sie den Unterschied zwischen der Größe der Box und der Größe der Box im Browser
Boxgröße = Polsterung + Rahmen + Inhaltsbereich
Die Größe der Box im Browser = Polsterung + Rahmen + Inhaltsbereich + Rand
Die Zusammensetzung des Boxmodells = innerer Rand + Rahmen + Inhaltsbereich + äußerer Rand

2. Klassifizierung von Boxmodellen:
Das Boxmodell kann durch die Boxgröße festgelegt werden. Der Standardwert für die Boxgröße ist „Content-Box“.

1) Inhaltsbox:
Inhaltsbox/W3C-Box;
Die bei diesem Modell eingestellten Breiten und Höhen betragen:

div{
	Breite: 100px;//Breite des Inhaltsbereichs Höhe: 100px;//Höhe des Inhaltsbereichs Rahmen: 5px durchgehend rosa;
	Polsterung: 10px;
	Rand: 10px;
	}

Die Breite der Box: Breite + linker Rand + rechter Rand + linke Polsterung + rechte Polsterung
Kastenhöhe: Höhe + oberer Rand + unterer Rand + obere Polsterung + untere Polsterung
Derzeit beträgt die Höhe der Box im Browser: Höhe + oberer Rahmen + unterer Rahmen + obere Polsterung + untere Polsterung + oberer Rand + unterer Rand;
Die Breite der Box im Browser beträgt: Höhe + oberer Rahmen + unterer Rahmen + obere Polsterung + untere Polsterung + oberer Rand + unterer Rand;

2) Rahmen:
Rahmenbox/IE-Box
Stellen Sie den Wert für die Border-Box über die Box-Größe ein
Die bei diesem Modell eingestellten Breiten und Höhen betragen:

width:200px; //Breite der Box height:200px; //Höhe der Box

Höhe des Inhaltsbereichs: Höhe - Rahmen oben - Rahmen unten - Polsterung oben - Polsterung unten
Höhe des Inhaltsbereichs: Höhe - Rahmen oben - Rahmen unten - Polsterung oben - Polsterung unten
Die Breite der Box im Browser: Breite + linker Rand + rechter Rand
Die Höhe der Box im Browser: Höhe + oberer Rand + unterer Rand

3. Verwendung des Boxmodells
Im Allgemeinen wird border-box verwendet, wenn Sie die Box-Größeneigenschaft festlegen müssen. Eine Funktion von border-box besteht darin, dass die eingestellte Breite und Höhe die Breite und Höhe der Box sind. Wenn Sie die Polsterung oder den Rahmen ändern, ändert sich die Boxgröße nicht, sondern schrumpft die Größe Ihres Inhaltsbereichs. Wenn Sie die Position des Inhaltsbereichs im Joint Venture festlegen müssen, können Sie border-box verwenden, um dies festzulegen.

Zusammenfassen

Dies ist das Ende dieses Artikels über das CSS-Boxmodell, der Sie nicht verwirren sollte. Weitere relevante Inhalte zum CSS-Boxmodell finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!