CSS3 Box Sizing
Le CSS3 box-sizing propriété nous permet d'inclure le rembourrage et la bordure dans la largeur et la hauteur totale d'un élément.
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit- ou -moz- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
Sans le CSS3 box-sizing propriété
Par défaut, la largeur et la hauteur d'un élément est calculé comme suit:
largeur + padding + border = largeur réelle d'un élément
hauteur + padding + border = hauteur réelle d'un élément
Cela signifie: Lorsque vous définissez la largeur / hauteur d'un élément, l'élément apparaît souvent plus grand que vous avez défini (parce que la bordure et l'espacement de l'élément sont ajoutés à largeur / hauteur spécifiée de l'élément).
L'illustration suivante montre deux <div> éléments avec la même largeur et la hauteur spécifiées:
Les deux <div> éléments ci - dessus finissent avec des tailles différentes dans le résultat (car div2 a un rembourrage spécifié):
Exemple
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} Essayez - le vous - même » Donc, pendant longtemps les développeurs web ont indiqué une valeur plus petite que la largeur qu'ils voulaient, parce qu'ils avaient pour soustraire le rembourrage et les frontières.
Avec CSS3, le box-sizing propriété résout ce problème.
Avec le CSS3 box-sizing propriété
Le CSS3 box-sizing propriété nous permet d'inclure le rembourrage et la bordure dans la largeur et la hauteur totale d'un élément.
Si vous définissez box-sizing: border-box; sur un rembourrage de l' élément et la frontière sont inclus dans la largeur et la hauteur:
Voici le même exemple que ci - dessus, avec box-sizing: border-box; ajoutée à la fois <div> éléments:
Exemple
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} Essayez - le vous - même » Étant donné que le résultat de l' utilisation du box-sizing: border-box; est tellement mieux, de nombreux développeurs veulent que tous les éléments sur leurs pages de travailler de cette façon.
Le code ci-dessous garantit que tous les éléments sont dimensionnés de cette manière plus intuitive. De nombreux navigateurs utilisent déjà box-sizing: border-box; pour de nombreux éléments de forme (mais pas tous - ce qui explique pourquoi les entrées et les zones de texte un aspect différent à la largeur: 100%;).
L'application de ce à tous les éléments est sûr et sage: