box
box
sizing
size
英 ['saɪzɪŋ] 美 ['saɪzɪŋ]
propriété de dimensionnement de boîte CSS syntaxe
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 CSS exemple
<!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