Schauen wir uns ihre Unterschiede anhand von Beispielen an:
(Empfohlenes Lernen: CSS-Schnellstart)
A The Das Box-Modell lautet wie folgt: Rand: 20 Pixel, Abstand: 10 Pixel; Breite: 200 Pixel; Höhe: 50 Pixel. Berechnen Sie nun die Breite und Höhe der Box unter den beiden Box-Modellen.
W3C-Standardbox:Breite und Höhe des von der Box eingenommenen Platzes: (von der Browserseite eingenommener Platz)
Breite = 200 + 10* 2 + 10*2 + 20*2 = 280 px;
Höhe = 50 + 10*2 + 10*2 + 20*2 = 130 px;
Tatsächliche Breite und Höhe der Box:
Breite = 200 + 10*2 + 10*2 = 240 px;
Höhe = 50 + 10*2 + 10*2 = 90 px;
IE-Box:Breite und Höhe des von der Box eingenommenen Platzes: (von der Browserseite eingenommener Platz)
Breite = 200 + 20*2 = 240 px;
Höhe = 50 + 20*2 = 90 px;
Tatsächliche Breite und Höhe der Box:
Breite = 200 px;
Höhe = 50 px;
Aus den Daten geht hervor, dass bei denselben Daten das Rahmenfeld kleiner ist als das Inhaltsfeld.
Anzeigeeffekt:
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen dem W3C-Boxmodell und dem IE-Boxmodell?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!