Analyse de boîte (mode boîte) en CSS_CSS/HTML

Cet article utilise l'illustration de la boîte pour analyser la boîte (mode boîte) en CSS, établissant ainsi un modèle clair pour les lecteurs qui apprennent le CSS.

Le modèle de boîte défini par le W3C est le suivant :

largeur et hauteur définissent la largeur et la hauteur de la partie Contenu, et la largeur de la marge de remplissage est ajoutée à son tour à l'extérieur. L'arrière-plan remplira les parties de remplissage et de contenu.
Cependant, en raison de problèmes de conception du navigateur, les effets d'affichage des différents navigateurs seront quelque peu différents.
Le problème du doublement des marges gauche et droite
Lorsque la boîte est flottante, les marges gauche et droite de la boîte dans IE6 doubleront
La marge gauche de l'intérieur gauche est évidemment plus grande que 5px.
À ce stade, définissez l'attribut d'affichage de inner comme étant en ligne.
Le problème avec le calcul automatique de la hauteur de la boîte extérieure
Selon la définition du W3C, la boîte extérieure sans attribut float ne calculera pas automatiquement la hauteur. Pour calculer la hauteur, clair : les deux doivent être ajoutés à la dernière boîte de. la couche interne.
Opera, Netscape, Mozilla, etc. ne calculeront pas la hauteur extérieure de la boîte, mais Microsoft ie6 calculera automatiquement la hauteur extérieure de la boîte.

Le code ci-dessus a un fond noir dans IE, mais les marges supérieure et inférieure ne sont pas calculées correctement. Après avoir ajouté un div contenant l'attribut clear:both sous inner2, la marge peut être calculée correctement. Mais il n'y a toujours pas de fond noir dans Firefox. La solution habituelle est de définir la hauteur du clear:both div, ou d'insérer un espace sur toute la largeur, il faut donc ajouter une hauteur supplémentaire. Une meilleure solution en ligne consiste à ajouter l'attribut overflow au div externe et à utiliser clear:both en même temps, afin qu'aucune hauteur supplémentaire ne soit ajoutée.

Par conséquent, l'attribut overflow doit être défini dans la couche externe du CSS, et l'attribut clear doit être ajouté à la couche interne à la fin.
Problème de centrage
Vous devez définir la largeur de l'élément et définir la marge horizontale Si votre mise en page est contenue dans un calque (conteneur), comme ceci :
Vous pouvez le définir comme ceci pour le centrer. horizontalement :
#wrap {
width:760px; /* Modifier la largeur de votre calque*/
margin:0 auto
}

Mais IE5/Win ne peut pas afficher cette définition correctement. Nous utilisons une astuce très utile pour la résoudre : utilisez l'attribut text-align dans la couche externe. Comme ceci :
#outer {
text-align:center
}
#wrap {
width:760px /* Changer la largeur de votre calque*/
margin; :0 auto;
text-align:gauche
} La première règle text-align:center; de #outer définit que tous les éléments de #outer dans IE5/Win sont centrés (les autres navigateurs centrent simplement le texte), et la deuxième règle text-align:left est ; Déplacez le texte dans #warp vers la gauche.
Par conséquent, en CSS avec des éléments centrés, le CSS externe doit définir l'attribut text-align:center, le centrage interne doit être défini avec margin:x auto x auto et text-align doit être redéfini.