Heim  >  Artikel  >  Web-Frontend  >  JQuery bestimmt das CSS-Box-Modell (Box-Modell)

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

巴扎黑
巴扎黑Original
2017-07-08 13:09:151174Durchsuche

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!

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:Funktionen des jQuery-ToolsNächster Artikel:Funktionen des jQuery-Tools