suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >Was ist der Unterschied zwischen den beiden Box-Modellen in CSS3?

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

青灯夜游
青灯夜游Original
2022-02-28 14:10:593731Durchsuche

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>

8b05045a5be5764f313ed5b9168a17e6 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

    • 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.

    • Formel:

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.

    • ②Die Breite der seltsamen Box umfasst Innenabstand, Inhaltsbreite und Rand. height enthält die Höhe, den Rand und den Abstand des Inhalts

  • width=(border-left+padding-left+width of the content+padding+right+border+right)

    • height=(border-top+padding-top +Höhe des Inhalts+Auffüllung -unten+Rahmen-unten)

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Welche Methoden gibt es, um ein mehrspaltiges Layout in CSS3 zu implementieren?Nächster Artikel：Welche Methoden gibt es, um ein mehrspaltiges Layout in CSS3 zu implementieren?

In Verbindung stehende Artikel

Mehr sehen