L'attribut box-sizing
permet de définir des éléments spécifiques d'une manière spécifique qui correspondent à une certaine zone.
Valeur par défaut : content-box
Syntaxe JavaScript : object.style.boxSizing="border-box"
Syntaxe
box-sizing : content-box|border-box|inherit;
content-box : la largeur et la hauteur sont appliquées respectivement à 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 l'é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.
inherit : Spécifie que la valeur de l'attribut box-sizing doit être héritée de l'élément parent.
Si box-sizing: border-box; est défini sur l'élément, padding (padding) et border (border) sont également inclus dans la largeur et la hauteur :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="div1">两个 div 现在是一样大小的!</div>
<br>
<div class="div2">php中文网</div>
</body>
</html>
N'utilise pas la propriété CSS3 box-sizing
Par défaut, la largeur et la hauteur d'un élément sont calculées comme suit :
width(width) + padding(inner margin) + border(border) = largeur réelle de l'élément
height(height) + padding(inner margin) + border(border) = hauteur réelle de l'élément
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>
</body>
</html> 