mozilla
Vos résultats de recherche

    box-sizing

    Cette fonction est expérimentale
    Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
    Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

    Résumé

    La propriété CSS box-sizing est utilisé pour modifier le modèle de boîte CSS par défaut qui est utilisé pour calculer la largeur et la hauteur des éléments. Il est possible d'utiliser cette propriété pour émuler le comportement des navigateurs qui n'appliquent pas correctement la spécification du modèle de boîte CSS.

    • Valeur initiale content-box
    • S'applique à all elements that accept width or height
    • Héritée non
    • Pourcentages
    • Média visual
    • Valeur calculée comme spécifié
    • Animable non
    • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

    Syntaxe

    Syntaxe formelle : content-box | padding-box | border-box
    
    box-sizing: content-box
    box-sizing: padding-box
    box-sizing: border-box
    
    box-sizing: inherit
    

    Valeurs

    content-box
    C'est la valeur par défaut spécifiée dans le standard CSS. Les propriétés width et height sont mesurées en incluant le contenu, mais pas la bordure, la marge extérieure ou intérieure.
    padding-box
    Les propriétés width et height incluent la marge intérieure, mais pas la bordure ou la marge extérieure.
    border-box
    Les propriétés width et height incluent la marge intérieure et la bordure, mais pas la marge extérieure. C'est le modèle de boîte utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks)

    Examples

    /* supporte Firefox, WebKit, Opera et IE8+ */
    
    .example {
      -moz-box-sizing: border-box;
           box-sizing: border-box;
    }

    Spécifications

    Spécification Statut Commentaire
    CSS Basic User Interface Module Level 3 Working Draft  

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support de base 1.0 -webkit
    10.0
    1.0 (1.7 ou moins)-moz
    29.0 (29.0)

    8.0

    7.0 3.0 (522)-webkit
    5.1 (534.12)
    padding-box Pas de support 1.0 (1.0) ? Pas de support ?
    Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Support de base 2.1-webkit
    4.0
    1.0 (1.0)-moz
    29.0 (29.0)
    Mango 7.5 (Oui) (Oui)
    padding-box ? 1.0 (1.0) ? ? ?

    Notes

    box-sizing n'est pas respecté lorsque height est calculé depuis window.getComputedStyle jusqu'à Firefox 22 (bug 520992) et Internet Explorer 9, mais pas dans Chrome 24 (d'autres navigateurs et propriétés n'ont pas été testées). Veuillez noter que la propriété currentStyle propriétaire de Internet Explorer 9 renvoie la bonne valeur de height.

    Aucune implémentation sans préfixe n'existe encore dans Gecko.

    Voir également

    Étiquettes et contributeurs liés au document

    Contributors to this page: tregagnon, jsilvestre, teoli, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale