Lorsque nous créons une page Web, nous rencontrons souvent une situation dans laquelle la largeur ou la hauteur de la page Web finale dépasse notre pré-calcul. Cela est en fait dû au modèle de boîte CSS.
| #test{marge:10px;padding:10px;largeur:100px;hauteur:100px;} |
Comme dans le code ci-dessus, nous calculerons souvent la position qu'il occupe comme largeur : 120 px, hauteur : 120 px, car dans des conditions normales, le remplissage est la marge intérieure, qui doit être incluse dans la largeur, et la marge est le bord extérieur. distance, donc width=margin-left + margin-right + width, mais l'interprétation du modèle de boîte CSS par le navigateur n'est pas la même, donc à la fin nous constaterons que la largeur et la hauteur de la page Web présentée dépasseront notre calculs attendus, et finalement provoquer le désalignement de l'affichage.
En fait, ce n'est pas le cas. Le calcul réel de la position occupée par test devrait être width=margin-left + margin-right + padding-left + padding-right + width, c'est-à-dire la taille réelle de la largeur. être marge intérieure + marge extérieure + La largeur elle-même, c'est-à-dire que la taille réelle du test doit être de 140 px. Le calcul de la hauteur est le même que le calcul de la largeur.
Et si une bordure est ajoutée au test, l'algorithme de largeur et de hauteur doit également ajouter la taille de la bordure.
| #test{marge:10px;padding:10px;border:5px;largeur:100px;hauteur:100px;} |
La largeur du test ici doit être la bordure extérieure + la bordure intérieure + la bordure + la largeur elle-même, donc la largeur du test est de 150 px.
Comme le montre la figure ci-dessous, la position réelle occupée par la largeur et la hauteur n'est pas la petite zone elle-même, mais doit aller jusqu'à la couche bleu foncé la plus externe.
