Taille de la boîte CSS3
Taille de la boîte CSS3
La propriété de dimensionnement de la boîte CSS3 peut être définie. Les propriétés de largeur et de hauteur incluent le remplissage (padding) et la bordure (bordure).
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) = réel hauteur de l'élément
Cela signifie que lorsque nous définissons 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).
Bien que les paramètres de largeur et de hauteur des deux éléments <div> dans l'image ci-dessus soient les mêmes, les tailles réelles affichées sont incohérentes car div2 spécifie le remplissage :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Exécutez et essayez-le
Utilisez cette méthode si vous souhaitez obtenir une boîte plus petite Et y compris rembourrage, vous devez tenir compte de la largeur de la bordure et du rembourrage.
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 (padding) et border (border) sont également inclus dans la largeur et la hauteur :
Exemple
Ce qui suit est un exemple simple d'ajout de l'attribut box-sizing: border-box; à deux éléments <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Exécutez-le et essayez-le
box-sizing: border-box; L'effet est meilleur, ce qui est exactement 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).
Il est recommandé d'utiliser le dimensionnement de la boîte pour tous les éléments :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="action_page.php">
用户名:<br>
<input type="text" name="username" value="php"><br>
邮箱:<br>
<input type="text" name="email" value="429240967@qq.com"><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>Exécutez-le et essayez-le
