JQuery bestimmt das CSS-Box-Modell (Box-Modell)

Jeder, der Frontend-Einstellungen vorgenommen hat, weiß, dass es zwei Arten von CSS-Box-Modellen gibt, das W3C-Standard-Box-Modell und das IE-Browser--Box-Modell. Die meisten Browser außer IE unterstützen nur das W3C-Box-Modell. Der IE-Browser kann den entsprechenden Box-Modus entsprechend der Definition des Rendering-Modus der Seite verwenden. Welcher Rendering-Modus verwendet wird, hängt von der DOCTYPE-Deklaration auf der Seite ab.

Wenn die Seite eine gültige DOCTYPE-Deklaration enthält, rendern Sie im strikten Modus.

Wenn die Seite keine DOCTYPE-Deklaration oder keine gültige DOCTYPE-Deklaration hat, wird sie im Kompatibilitätsmodus gerendert.

Das Folgende ist der Unterschied zwischen den beiden Modi. Der Hauptunterschied zwischen den beiden Rendering-Modi besteht in der Berechnung der Breiten- und Höhenstile der Elemente. Zum Beispiel der folgende Stil

{

width:180px;

height:72px;

padding:10px;

　bording-width:5px;

}

Im strengen W3C-Modus beträgt der Anzeigebereich des Elementinhalts 180*72px. Abstand und Rand liegen außerhalb des 180*72-Pixel-Bereichs. Der Abdeckungsbereich des gesamten Elements beträgt also: Breite: 180 + 10 * 2 + 5 * 2 = 210 Pixel, Höhe: 72 + 10 * 2 + 5 * 2 = 102 Pixel.

Im Kompatibilitätsmodus des IE beträgt der Abdeckungsbereich des gesamten Elements 180 * 72 Pixel. Die Größe des Inhalts wird auf eine Breite von 180 – 10*2 – 5*2=150 Pixel und eine Höhe von 72 – 10*2 – 5*2 = 32 Pixel reduziert.

ist eine sehr einfache Methode, um mit JQuery Box Modal zu beurteilen. Es wird das $.boxModel-Flag vom Typ bool übergeben. Wenn die Seite das W3C-Standardmodell verwendet, geben Sie „true“ zurück. Andernfalls geben Sie „false“ zurück.

Das obige ist der detaillierte Inhalt vonJQuery bestimmt das CSS-Box-Modell (Box-Modell). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!