Comment empêcher les entrées CSS avec « largeur : 100 % » de dépasser les limites des parents ?

Entrée CSS avec largeur : 100 % dépasse la limite du parent

En CSS, la largeur et la hauteur d'un élément sont appliquées à sa zone de contenu, y compris le remplissage. Cependant, définir un élément avec un remplissage à 100 % de largeur peut entraîner le dépassement de la taille de son parent.

Comprendre le modèle de boîte de base CSS

Le modèle de boîte de base CSS définit la façon dont la taille et la disposition d'un élément sont calculés. Il se compose du contenu, du remplissage, de la bordure et de la marge.

Lorsque width : 100 % est appliqué, cela affecte la largeur de la zone de contenu. Mais si l'élément a un remplissage, il s'étend au-delà de la zone de contenu, augmentant ainsi sa taille globale.

Briser la barrière de remplissage

Pour empêcher le remplissage d'affecter la largeur et la hauteur d'un élément, définissez la case -dimensionnement de la propriété CSS en border-box :

box-sizing: border-box;

Cela demande au navigateur d'inclure le remplissage interne de la largeur et de la hauteur de l'élément, l'empêchant de s'étendre au-delà des limites du parent.

Navigateur Compatibilité

le dimensionnement de la boîte est pris en charge par tous les principaux navigateurs, mais pensez à utiliser des préfixes pour les anciennes versions d'Internet Explorer (antérieures à la version 8).

Utilisation du dimensionnement de la boîte dans le contexte

Pour résoudre le problème dans votre JSFiddle fourni, ajoutez box-sizing: border-box; aux règles suivantes :

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

Utilisation « héritée » recommandée

Paul Irish et Chris Coyier recommandent d'hériter de la taille de la boîte de l'élément html pour garantir la cohérence tout au long de la page :

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

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!