propriété de dimensionnement de boîte CSS
Résultats de traduction:
box
box
sizing
size
英 ['saɪzɪŋ] 美 ['saɪzɪŋ]
propriété de dimensionnement de boîte CSSsyntaxe
Ce qu'il fait : L'attribut box-sizing vous permet de définir des éléments spécifiques qui correspondent à une certaine zone d'une manière spécifique. Par exemple, si vous devez placer deux boîtes bordées côte à côte, vous pouvez le faire en définissant box-sizing sur « border-box ». Cela amène le navigateur à afficher une boîte avec la largeur et la hauteur spécifiées, et à placer les bordures et le remplissage dans la boîte.
Syntaxe : box-sizing : content-box|border-box|inherit
Description : content-box Il s'agit du comportement de largeur et de hauteur spécifié par CSS2.1. La largeur et la hauteur sont appliquées séparément à la zone de contenu de l'élément. Dessine le remplissage et les bordures de l'élément en dehors de sa largeur et de sa hauteur. border-box La largeur et la hauteur définies pour un élément déterminent la zone de bordure de l'élément. Autrement dit, tout remplissage et bordures spécifiés pour l'élément seront dessinés dans la largeur et la hauteur définies. La largeur et la hauteur du contenu sont obtenues en soustrayant respectivement la bordure et le remplissage de la largeur et de la hauteur définies. Hériter spécifie que la valeur de la propriété box-sizing doit être héritée de l'élément parent.
Remarque : Internet Explorer, Opera et Chrome prennent en charge l'attribut box-sizing. Firefox prend en charge une propriété alternative -moz-box-sizing.
propriété de dimensionnement de boîte CSSexemple
<!DOCTYPE html> <html> <head> <style> div.container { width:30em; border:1em solid; } div.box { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; border:1em solid red; float:left; } </style> </head> <body> <div class="container"> <div class="box">这个 div 占据左半部分。</div> <div class="box">这个 div 占据右半部分。</div> </div> </body> </html>
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Recommandations populaires
- que fait réellement box-sizing: border-box ?
- Explication détaillée du dimensionnement de la propriété CSS
- Guide des propriétés des images CSS : contour et dimensionnement des boîtes
- Conseils d'optimisation des propriétés du modèle de boîte CSS : dimensionnement de la boîte
- Présentation du modèle de boîte CSS et des propriétés de dimensionnement des boîtes
- box-blur.dll – Qu'est-ce que box-blur.dll ?