Tutoriel CSS 3 : Comprendre la propriété box-sizing
Auteur：Eve Cole
Date de mise à jour：2009-06-12 17:54:27
En parlant de bugs d'IE, un exemple notoire est son interprétation incorrecte du "modèle de boîte" : dans IE5.x et IE6/7 en mode Quirks, la bordure et le remplissage sont inclus dans la largeur. Cela ajoute beaucoup de problèmes au travail des ingénieurs front-end. Chaque boîte qui doit définir une taille doit être prise en compte : cela déclenche-t-il un « bug de modèle de boîte » ?
Dans le même temps, en raison de la conformité d'un autre groupe de navigateurs aux normes, lorsque nous définissons avec précision une boîte affichée dans un espace limité, nous devons également calculer : l'espace qui lui reste n'est que très grand, sans compter la bordure et le remplissage. , nous devrions. Quelle est sa largeur écrite?
Cette situation s'est améliorée à l'ère CSS3, grâce à cette propriété appelée box-sizing, qui a deux valeurs "content-box" et "border-box".
Lors de la définition de la taille de la boîte : content-box;, l'interprétation du modèle de boîte par le navigateur suit la norme W3C que nous avons reconnue auparavant ;
Lorsque box-sizing: border-box; est défini, l'interprétation du modèle de boîte par le navigateur est la même que celle d'IE6 ;
Pourquoi cet attribut est-il dit « en retard » ? Bien que l'interprétation du modèle de boîte par IE ne soit pas conforme aux spécifications du W3C, elle présente également des avantages : peu importe la façon dont vous modifiez les valeurs de bordure et de remplissage, cela n'entraînera pas de modification de la taille totale de la boîte, et cela le fera. ne perturbe pas la présentation générale de la page. Dans les navigateurs modernes comme Firefox, si l'on souhaite modifier la valeur du remplissage, il faut recalculer la largeur de la boîte. Maintenant que IE6 est mort, cette propriété CSS se fait attendre un peu depuis longtemps.
Pour essayer cette nouvelle propriété, veuillez utiliser -moz-box-sizing pour Firefox, utilisez -webkit-box-sizing pour Safari/WebKit et utilisez simplement box-sizing pour Opera.
