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">這個(gè)是個(gè)較小的框 (width 為 300px ，height 為 100px)。</div>
<br>
<div class="div2">這個(gè)是個(gè)較大的框 (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">兩個(gè) div 現(xiàn)在是一樣大小的!</div>
<br>
<div class="div2">php中文網(wǎng)!</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">
用戶(hù)名:<br>
<input type="text" name="username" value=""><br>
郵箱:<br>
<input type="text" name="email" value=""><br>
評(píng)論:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form> 
<p><strong>提示：</strong> 可以嘗試移除樣式中的 box-sizing 屬性，看看會(huì)發(fā)生什么。注意移除后部分瀏覽器 input, textarea, 和 submit 按鈕的寬度不一致。</p>
</body>
</html>

Formation continue

nouveau fichier

<!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"> 用戶(hù)名:<br> <input type="text" name="username" value=""><br> 郵箱:<br> <input type="text" name="email" value=""><br> 評(píng)論:<br> <textarea name="message" rows="5" cols="30"> </textarea> <br><br> <input type="submit" value="Submit"> </form> <p><strong>提示：</strong> 可以嘗試移除樣式中的 box-sizing 屬性，看看會(huì)發(fā)生什么。注意移除后部分瀏覽器 input, textarea, 和 submit 按鈕的寬度不一致。</p> </body> </html>

soumettre Réinitialiser le code

Opération automatique