Was ist der Unterschied zwischen den beiden Box-Modellen in CSS3?-Front-End-Fragen und Antworten-php.cn

Was ist der Unterschied zwischen den beiden Box-Modellen in CSS3?

青灯夜游

Freigeben： 2022-02-28 14:10:59

Original

3699 Leute haben es durchsucht

Unterschiede: 1. Die Breite und Höhe des Standardfelds sind die Breite und Höhe des Inhaltsbereichs, während sich die Breite und Höhe des seltsamen Modells auf die Breite und Höhe des „Inhaltsbereichs + Rand + Polsterung“ beziehen. 2. Die Standardbox fügt Polsterungen hinzu, Ränder und Ränder haben keinen Einfluss auf die Größe des Elements, während bei seltsamen Modellen dies der Fall ist.

Was ist der Unterschied zwischen den beiden Box-Modellen in CSS3?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Das Boxmodell umfasst Inhalt, Abstand, Rand und Rand.

Es gibt zwei Boxmodelle in CSS, nämlich das W3C-Standardmodell und das IE-Weitwinkelmodell.

Einführung:

<!DOCTYPE html>  
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

Nach dem Login kopieren

Deklariert den Parsing-Typ des Dokuments. Wie wichtig ist er?
BackCompat: Seltsamer Modus, der browsereigene Modus.
CSS1Compat: Standardmodus, W3C-Standard Analysieren Sie die Rendering-Seite.
Wenn keine Deklaration erfolgt, wird sie gemäß dem seltsamen Modus gerendert. Verschiedene Browser rendern unterschiedlich Wenn es um seine Breite und Höhe geht, legt das Standard-Box-Modell nur die Breite und Höhe des Inhalts (blauer Teil) fest, daher muss die tatsächliche Breite und Höhe dieses Elements auch seinen Füllrand (Innenrand) (Rand) hinzufügen (Ränder).
Formel:

width = Breite des Inhalts

height = Höhe des Inhalts

2. Seltsames Modell

Ein Element legt seine Breite und Breite fest Höhe, das seltsame Boxmodell behandelt die gesamte Box als Ganzes. Geben Sie der gesamten Box eine Breite und Höhe. Wenn Sie auch zusätzliche Ränder und Ränder für die Box festlegen. Dann wird der blaue Teil des Inhalts in der Mitte gestaucht und kleiner.

Breite = Rand + Innenabstand + Breite des Inhalts

Höhe = Rand + Innenabstand + Höhe des Inhalts

Der Hauptunterschied zwischen dem W3C-Standardmodell und dem seltsamen IE-Modell ist die Breite der Box hoch.

①Die Breite und Höhe des Standardfelds stellen die Breite und Höhe des Inhalts dar, Breite = Breite des Inhalts, Höhe = Höhe des Inhalts; eine Vergrößerung der inneren Ränder, Ränder und äußeren Ränder hat keinen Einfluss auf die Größe des Inhaltsbereichs , erhöht aber die Gesamtgröße der Box des Elements.
width=(border-left+padding-left+width of the content+padding+right+border+right)

Zusammenfassung:

1. Legen Sie nur die Größe des Inhalts fest. IE-Boxmodell: Behandeln Sie das gesamte Element als Gesamtsatzgröße.

2. Das Box-Modell von CSS besteht aus Inhalt, Abstand, Rand und Rand. Die Größe der Box wird jedoch durch Inhalt+Innenraum+Rand bestimmt, ohne Rand.

3. Wir sollten versuchen, beim Schreiben von Seitencode das Standard-W3C-Modell zu verwenden (der DOCTYPE-Typ muss auf der Seite deklariert werden), um die Inkompatibilität mehrerer Browser auf derselben Seite zu vermeiden.

Denn wenn der DOCTYPE-Typ nicht deklariert ist, interpretiert der IE-Browser das Box-Modell als IE-Box-Modell, und FireFox interpretiert es als W3C-Box-Modell. Wenn der DOCTYPE-Typ auf der Seite deklariert ist, interpretieren alle Browser Das Boxmodell Wird als W3C-Boxmodell interpretiert.

(Lernvideo-Sharing: CSS-Video-Tutorial, Web-Frontend)

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen den beiden Box-Modellen in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!