Beurteilung der Breite und Höhe der Box in verschiedenen Modi

Ich bin einmal auf ein solches Problem gestoßen, als ich beim Festlegen der Auffüllung des Div festgestellt habe, dass sich die Breite und Höhe des gesamten Div geändert hat. Dies warf die Frage auf, wie groß die Gesamtbreite und -höhe ist Box? Wie soll ich urteilen?

Nach einer Anfrage haben wir erfahren, dass es zwei Modi zur Bestimmung der Breite und Höhe der Box gibt, nämlich Standardmodus und seltsamer Modus.

Um es besser zu verstehen, richten wir ein Div ein und formatieren es:

<span style="color: #008080;">1</span> <span style="color: #800000;">    #content1</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">        border</span>:<span style="color: #0000ff;"> 2px solid black</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">        margin</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">        padding</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">7</span>     } 

Unter normalen Umständen entsprechen die Breite und Höhe einer Box der Breite und Höhe des Inhalts, der Breite und Höhe des Rahmens, der Breite und Höhe des inneren Rands und der Breite und Höhe des äußeren Rands Marge

Dies ist die Bestimmung der Boxbreite und -höhe im Standardmodus

Aber irgendwann (DOCTYPE fehlt unter IE6, 7, 8) sind die Breite und Höhe der Box gleich der Breite und Höhe der eingestellten Breite und Höhe des äußeren Randes. Die hier eingestellte Breite und Höhe entspricht der Breite und Höhe des Inhalts. Die Breite und Höhe des Rahmens

Dies ist die Bestimmung der Boxbreite und -höhe im seltsamen Modus

Wir können entscheiden, welcher Modus verwendet werden soll, indem wir das Box-Sizing-Attribut

verwenden

content-box: verwendet die Berechnung

StandardmodusParsing,

border-box: verwendet

seltsamer Modus Parsing Berechnung; Durch den seltsamen Modus können wir die Polsterung der Box festlegen, ohne die Gesamtbreite und -höhe zu ändern.