Pourquoi mon élément d'entrée déborde-t-il de son parent lorsque j'utilise « largeur : 100 % » ?

Comprendre le problème des limites d'entrée CSS

Dans le développement Web, il est courant de rencontrer des situations où les éléments d'entrée HTML dépassent les limites de leurs parents lorsque width: 100% est appliqué . Ce problème survient en raison du modèle de boîte CSS, qui explique comment les éléments sont dimensionnés et disposés.

Le modèle de boîte

Le modèle de boîte CSS considère les dimensions d'un élément en quatre parties :

• Boîte de contenu : La zone la plus intérieure contenant le contenu de l'élément, tel que du texte ou images.
• Padding : L'espace entre la zone de contenu et la bordure de l'élément.
• Border : La ligne entourant l'élément.
• Marge : L'espace à l'extérieur du border.

Impact du remplissage sur les dimensions

Par défaut, les propriétés width et height d'un élément sont appliquées à sa zone de contenu. Cependant, lorsque le remplissage est présent, il s'étend au-delà de la zone de contenu, augmentant la taille globale de l'élément.

Si vous définissez width : 100 % sur un élément avec un remplissage, le remplissage poussera la largeur de l'élément au-delà de 100. % de la largeur de son parent, l'amenant à dépasser les limites.

Ajustement du comportement avec le dimensionnement de la boîte

Pour Pour empêcher le remplissage d'affecter la largeur de l'élément, vous pouvez définir la propriété box-sizing sur border-box. Cela indique au navigateur d'inclure le remplissage dans les calculs de largeur et de hauteur de l'élément.

Voici le code CSS utilisant le dimensionnement de la boîte :

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

Meilleures pratiques

Considérez les suivez les bonnes pratiques pour un dimensionnement cohérent :

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

Cela garantit que le dimensionnement de la bordure est hérité par tous éléments, en évitant les incohérences potentielles.

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!