Propriété Style boxSizing
- Page précédente boxShadow
- Page suivante captionSide
- Retour au niveau supérieur Objet Style HTML DOM
Définition et utilisation
boxSizing Cette propriété vous permet de définir de manière spécifique un élément pour correspondre à une zone spécifique.
Par exemple, si vous avez besoin de placer deux boîtes avec des bordures côte à côte, vous pouvez définir box-sizing sur "border-box". Cela permet au navigateur d'afficher des boîtes avec des largeurs et des hauteurs définies, en plaçant les bordures et les marges internes à l'intérieur de la boîte.
Voir également :
Manuel de référence CSS :box-sizing propriété
Exemple
Modifier la propriété boxSizing :
document.getElementById("myDIV").style.boxSizing = "border-box";
Syntaxe
Retourner la propriété boxSizing :
objet.style.boxSizing
Définir la propriété boxSizing :
objet.style.boxSizing = "content-box|border-box|initial|inherit"
Valeur de l'attribut
| Valeur | Description |
|---|---|
| content-box |
Valeur par défaut. C'est le comportement des largeurs et hauteurs définies par CSS2.1. Les largeurs et hauteurs définies (ainsi que les propriétés min/max) sont appliquées respectivement aux largeurs et hauteurs des encadrés de contenu de l'élément. La mise en page et le dessin des marges internes et des bords de l'élément se font en dehors des largeurs et hauteurs définies. |
| border-box |
La largeur et la hauteur définies pour l'élément déterminent le boîtier de bord de l'élément. C'est-à-dire, toute marge interne et bord assignée à l'élément sera dessinée à l'intérieur des largeurs et hauteurs définies. La largeur et la hauteur du contenu peuvent être obtenues en soustrayant les bords et les marges internes des largeurs et hauteurs définies. |
| initial | Réinitialise cette propriété à sa valeur par défaut. Voir également initial。 |
| inherit | Cette propriété est héritée de l'élément parent. Voir également inherit。 |
Détails techniques
| Valeur par défaut : | content-box |
|---|---|
| Valeur de retour : | une chaîne de caractères, représentant l'élément box-sizing propriété。 |
| Version CSS : | CSS3 |
Support du navigateur
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
- Page précédente boxShadow
- Page suivante captionSide
- Retour au niveau supérieur Objet Style HTML DOM
