Unterschiede in den Arten von Boxmodellen in CSS

Wir wissen, dass Box-Modell ein wichtiges Konzept in CSS ist. Nur wenn Sie das Box-Modell verstehen, können Sie das Layout und die Planung verbessern, aber im Allgemeinen gibt es zwei Arten von Box-Modellen, eine IE-Box Modell und ein W3C-Box-Modell

Der Umfang des ie-Box-Modells umfasst auch Rand, Rahmen, Polsterung und Inhalt. Der Unterschied zum Standard-W3C-Box-Modell besteht darin, dass der Inhaltsteil des ie-Box-Modells einen Rahmen umfasst und Polsterung.

Beispiel: Der Rand einer Box beträgt 20 Pixel, der Rand beträgt 1 Pixel, der Abstand beträgt 10 Pixel, die Breite des Inhalts beträgt 200 Pixel und die Höhe beträgt 50 Pixel Wird unter Verwendung des Standard-W3C-Boxmodells interpretiert. Die Position, die diese Box einnehmen muss, ist dann: Breite 20 * 2 + 1 * 2 + 10 * 2 + 200 = 262 Pixel, Höhe 20 * 2 + 1 * 2 * 10 * 2 + 50 =112px, die tatsächliche Größe der Box beträgt: Breite 1*2+10*2+200=222px, Höhe 1*2+10*2+50=72px;

Wenn Sie das ie-Box-Modell verwenden Dann muss dieses Feld folgende Position einnehmen: Breite 20 * 2 + 200 = 240 Pixel, Höhe 20 * 2 + 50 = 70 Pixel. Die tatsächliche Größe des Felds beträgt: Breite 200 Pixel, Höhe 50 Pixel.

Auswahl des Boxmodells:

Was ist die Wahl des „Standard-W3C-Boxmodells“? Es ist ganz einfach, fügen Sie einfach die Doctype-Anweisung oben auf der Webseite hinzu. Wenn Sie keine Doctype-Anweisung hinzufügen, versteht jeder Browser die Webseite entsprechend seinem eigenen Verhalten, d. h. der IE-Browser verwendet das IE-Box-Modell, um Ihre Box zu interpretieren, und ff verwendet dazu das Standard-W3C-Box-Modell Interpretieren Sie Ihre Box so, dass die Webseite in verschiedenen Browsern unterschiedlich angezeigt wird. Im Gegenteil, wenn Sie die Doctype-Deklaration hinzufügen, verwenden alle Browser das standardmäßige W3C-Boxmodell, um Ihre Box zu interpretieren, und die Webseite wird in jedem Browser konsistent angezeigt.

PS: Der Unterschied zwischen Rand und Polsterung in CSS

In CSS bezieht sich Rand auf den Abstand zwischen dem eigenen Rahmen und dem Rand eines anderen Containers außerhalb von sich selbst, also dem Abstand außerhalb des Containers ; Polsterung ist der Innenabstand des Behälters.

1. padding

1. Syntaxstruktur

(1)

padding-left

:10px; leftpadding (2)

padding-right

:10px; right padding(3)

padding-top

:10px; top padding (4)

Polsterung unten

; untere Polsterung(5)Polsterung: 10px; einheitliche Polsterung auf allen vier Seiten

( 6) Polsterung: 10px 20px; Polsterung oben, unten, links und rechts

(7) Polsterung: 10px 20px 30px; Polsterung oben, links und unten

(8) Polsterung: 10px 20px 30px 40px; und linke Polsterung

2. Mögliche Werte

(1) Länge gibt die Polsterungslänge in bestimmten Einheiten an

( 2) % Die Länge der Polsterung basierend auf der Breite des übergeordneten Elements

(3) auto Der Browser berechnet den Abstand

(4) inherit gibt an, dass der Abstand vom übergeordneten Element geerbt werden soll

3 Kompatibilitätsprobleme

(1) Alle Browser unterstützen das Padding-Attribut

(2) Keine IE-Version unterstützt den Attributwert „inherit“

Ich glaube, Sie haben es gemeistert Weitere spannende Informationen finden Sie in den anderen verwandten Artikeln auf der chinesischen PHP-Website.

Verwandte Lektüre:

Detaillierte Einführung in das Übersetzungsattribut in CSS3

Schritte zum Implementieren des rotierenden Halo-Effekts in CSS3

Detaillierte Einführung in das Border-Image-Attribut in CSS3

Das obige ist der detaillierte Inhalt vonUnterschiede in den Arten von Boxmodellen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!