JQuery détermine le modèle de boîte CSS (Box Model)

Tous ceux qui ont effectué des réglages front-end savent qu'il existe deux types de modèles de boîte CSS, le modèle de boîte standard du W3C et le modèle de boîte navigateur IE . La plupart des navigateurs, à l'exception d'IE, ne prennent en charge que le modèle de boîte W3C. Le navigateur IE peut utiliser le mode boîte correspondant selon la définition du mode de rendu de la page. Le mode de rendu utilisé dépend de la déclaration DOCTYPE sur la page.

Si la page contient une déclaration DOCTYPE valide, effectuez le rendu en mode strict.
Si la page n'a pas de déclaration DOCTYPE ou aucune déclaration DOCTYPE valide, elle est rendue en mode de compatibilité.
Ce qui suit est la différence entre les deux modes. La principale différence entre les deux modes de rendu est le calcul des styles de largeur et de hauteur des éléments. Par exemple, le code de style

suivant est le suivant :

{ 
　　width:180px; 
　　height:72px; 
　　
padding
:10px; 
　　bording-width:5px; 
}

En mode strict du W3C, la plage d'affichage du contenu de l'élément est de 180*72px. Le Padding et la bordure sont en dehors de la plage de 180*72 pixels. Ainsi, la zone de couverture de l'élément entier est : largeur : 180 + 10*2 + 5*2 = 210 px, hauteur : 72 + 10*2 + 5*2 = 102 px.
En mode de compatibilité d'IE, la zone de couverture de l'ensemble de l'élément est de 180*72 pixels. La taille du contenu est réduite à une largeur de 180 - 10*2 - 5*2=150px et une hauteur de 72 - 10*2 - 5*2 =32px.
Il est très simple d'utiliser JQuery pour juger Box Modal. Il reçoit le drapeau $.boxModel de type bool. Si la page utilise le modèle standard du W3C, renvoyez true. Sinon, renvoyez false.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!