Taille de la boîte CSS3
La propriété CSS3 de dimensionnement de la boîte peut définir les propriétés de largeur et de hauteur, qui incluent le remplissage (padding) et la bordure (bordure).
N'utilise pas la propriété CSS3 box-sizing
Par défaut, la largeur et l'extrémité supérieure d'un élément sont calculées comme suit :
largeur + padding (Padding) + border (border) = Largeur réelle de l'élément
height (height) + padding (Padding) + border (border) = Hauteur réelle de l'élément
Cela signifie Quand nous définissez la largeur/hauteur d'un élément, la hauteur et la largeur réelles affichées de l'élément seront plus grandes (car la bordure et le remplissage de l'élément sont également calculés en largeur/hauteur).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>En utilisant cette méthode, si vous souhaitez obtenir une boîte plus petite et inclure un remplissage, vous devez prendre en compte la largeur de la bordure et le remplissage.
La propriété box-sizing de CSS3 résout très bien ce problème.
Utilisez la propriété CSS3 box-sizing
La propriété CSS3 box-sizing inclut un remplissage (à l'intérieur) dans la largeur et la hauteur d'un élément margin) et border (border).
Si box-sizing: border-box; est défini sur l'élément, padding (marge intérieure) et border (border) sont également inclus dans la largeur et la hauteur :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>À partir des résultats Voir box-sizing : border-box ; pour de meilleurs résultats, ce dont de nombreux développeurs ont besoin.
Le code suivant peut afficher la taille de tous les éléments de manière plus intuitive. De nombreux navigateurs prennent déjà en charge le dimensionnement de la boîte : border-box ; (mais pas tous - c'est pourquoi les éléments de saisie et de texte avec une largeur : 100 % ; ont des largeurs différentes).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="action_page.php">
用户名:<br>
<input type="text" name="username" value=""><br>
邮箱:<br>
<input type="text" name="email" value=""><br>
评论:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p><strong>提示：</strong> 可以尝试移除样式中的 box-sizing 属性，看看会发生什么。注意移除后部分浏览器 input, textarea, 和 submit 按钮的宽度不一致。</p>
</body>
</html>
section suivante