Un coup d'oeil dans CSS3 Box-sizing
Il n'y a pas si longtemps, lorsque nous créons un boîte dans une page Web, disons avec un div, nous spécifions 100px pour la largeur et la hauteur, suivi de rembourrage pour 10px et des frontières d'environ 10px ainsi que.
div width: 100px; hauteur: 100px; rembourrage: 10px; bordure: 10px solide #eaeaea;
Les navigateurs étendront la taille de la boîte à 140 pixels, où 140 pixels de la largeur / hauteur totale sont constitués de l’ajout du rembourrage et le les frontières comme suit; 100px [largeur / hauteur] + (2 x 10px [remplissage]) + (2 x 10px [bordure]).
Cependant, parfois, ce résultat n’est pas ce à quoi nous nous attendons. Parfois, il faut que la boîte soit toujours 100px indépendamment du remplissage ou des frontières ajoutées.
Pour résoudre un tel problème récurrent lors de la création d’une mise en page Web, nous pouvons utiliser le CSS3. taille de la boîte propriété pour contrôler la Modèle de boîte CSS devrait fonctionner dans les navigateurs.
Utilisation de la taille de la boîte
le taille de la boîte propriété a deux options de valeur, d’abord la contenu-box; qui est la valeur par défaut, lors de l'utilisation de cette valeur, le modèle de boîte se comportera comme nous l'avons décrit ci-dessus.
Et le second est boîte à bordure, où la taille de la boîte sera calculée en soustrayant la taille du contenu spécifié avec le rembourrage et les bordures ajoutées.
div width: 100px; hauteur: 100px; rembourrage: 10px; bordure: 10px solide #eaeaea; taille de la boîte: boîte-frontière; -moz-box-dimensionnement: border-box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /
Par exemple, lorsque nous avons une boîte comme celle décrite ci-dessus (100px carrés avec 10 pixels pour le remplissage et les bordures), la taille du contenu diminue à 60px, et la taille totale de la boîte reste 100px, où l'équation de la soustraction peut être décrite comme suit; 100px [largeur / hauteur] - ((2 x 10px [remplissage]) + (2 x 10px [bordure]))).
- Démo
- Source de téléchargement
Prise en charge du navigateur
le taille de la boîte la propriété est supporté par tous les navigateurs; Firefox 3.6+, Safari 3, Opera 8.5+ et Internet Explorer 8 et supérieur.
Donc, si vous savez que la plupart de vos visiteurs n'utiliseront pas les versions Internet Explorer inférieures à 8, vous pouvez utiliser cette recommandation utile (merci à Paul Irish).
* box-sizing: border-box; -moz-box-dimensionnement: border-box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /
L'extrait ci-dessus appliquera le taille de la boîte propriété de tous les éléments de votre page Web.
Exemple
Dans cette section, nous allons vous montrer un exemple concret sur la façon dont nous pouvons utiliser cette taille de la boîte propriété. Nous allons créer une navigation simple, basée sur le balisage HTML ci-dessous, avec cinq menus de liens..
Ensuite, nous ajouterons quelques styles décoratifs; tels que, définissez la navigation largeur fixe pour 500px et la largeur du lien pour 100px chacun, insérez ensuite l'élément de la liste et indiquez des arrière-plans différents pour chaque menu de liens, afin de voir la différence entre eux.
nav largeur: 500px; marge: 50px auto 0; hauteur: 50px; nav ul padding: 0; marge: 0; nav li float: left; nav a display: inline-block; largeur: 100px; hauteur: 100%; couleur de fond: #ccc; couleur: # 555; texte-décoration: aucun; font-family: Arial, sans-serif; taille de police: 12 pt; hauteur de trait: 300%; text-align: center; nav a display: inline-block; largeur: 100px; hauteur: 100%; couleur: # 555; texte-décoration: aucun; font-family: Arial, sans-serif; nav li: n-enfant (1) a background-color: # E9E9E9; frontière gauche: 0; nav li: n-enfant (2) a background-color: # E4E4E4; nav li: n-enfant (3) a background-color: #DFDFDF; nav li: n-enfant (4) a background-color: # D9D9D9; nav li: n-enfant (5) a background-color: # D4D4D4; frontière droite: 0;
À ce stade, notre navigation semble normale.
Cependant, le problème viendra lorsque nous ajouterons des bordures gauche ou droite au menu des liens..
nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3;
Le menu débordera vers le bas, la largeur du lien n’étant plus 100px. C'est maintenant 102px, provoquant la largeur totale de la navigation pour être 10px plus longtemps que nous avons spécifié ci-dessus (500px).
Pour surmonter ce problème, nous devons appliquer les taille de la boîte propriété, comme suit:
nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3; taille de la boîte: boîte-frontière; -moz-box-dimensionnement: border-box; -webkit-box-dimensionnement: border-box;
- Démo
- Source de téléchargement
Lectures complémentaires
Et enfin, si vous êtes du type aventureux et que vous souhaitez approfondir ce sujet, nous avons rassemblé pour vous quelques références sélectionnées:
- Comprendre le modèle CSS Box - Tech Republic
- Bug de taille de boîte dans Firefox - BugZilla
- Taille de boîte FTW - Paul Irish
