Pourquoi une entrée CSS avec « largeur : 100 % » s'étend-elle au-delà des limites de son parent ?

Entrée CSS avec largeur : 100 % sort de la limite du parent

Pourquoi cela se produit-il ?

En CSS, les propriétés width et height définissent la taille de la zone de contenu. Cependant, le remplissage est ajouté en dehors de la zone de contenu, augmentant ainsi la taille globale de l'élément.

Lorsque vous définissez un élément avec un remplissage sur width : 100 %, son remplissage le rend plus large que 100 % de son élément contenant.

La solution

Pour empêcher le remplissage d'affecter la largeur ou la hauteur d'un élément, utilisez la propriété box-sizing définie sur border-box :

box-sizing: border-box;

Cela fait que les propriétés width et height incluent le remplissage et la bordure, ce qui donne une largeur totale de 100 %.

Compatibilité des navigateurs

box -sizing a une bonne compatibilité avec les navigateurs (IE8 ). Aucun préfixe n'est requis.

Approche alternative : dimensionnement de la boîte « hérité »

Certains experts recommandent d'utiliser l'approche « héritée » suivante :

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Cela définit la taille de la boîte à border-box pour l'ensemble du document, et permet à tous les éléments d'en hériter paramètre.

Démonstration

Voici une démonstration avec la bordure-box appliquée aux éléments d'entrée :

input[type=text],
input[type=password] {
  width: 100%;
  box-sizing: border-box;
}

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!