Heim > Artikel > Web-Frontend > 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!