Maison > Article > interface Web > Un examen plus approfondi de la propriété CSS3 border-sizing
Un examen plus approfondi de la propriété CSS3 border-sizing
- 青灯夜游avant
- 2020-12-23 10:45:142047parcourir
Recommandé : Tutoriel vidéo CSS
box-sizingPour modifier le modèle de boîte CSS par défaut utilisé pour calculer la largeur et la hauteur des éléments. Il a trois valeurs : content-box, border-box et inherit. inherit fait référence à l'héritage de la forme d'expression de box-sizing de l'élément parent, qui n'est plus redondant.
1. Explication de l'attribut
content-box
La valeur par défaut est également le modèle de boîte en CSS2.1. Lors du calcul de width et height, border, padding et margin ne sont pas calculés. La hauteur et la largeur ne sont que la hauteur du contenu.
border-box
css3Nouveau. Les attributs width et height incluent le contenu, le remplissage et les bordures, mais pas les marges.
Formule de calcul :
largeur = largeur = bordure + remplissage + largeur du contenu
hauteur = bordure + rembourrage + hauteur du contenu
2 Compte tenu du modèle de boîte margin
, nous pouvons savoir d'après ce qui précède que même s'il s'agit de border-box, ce n'est pas calculé margin , c'est juste que border et padding sont calculés de manière redondante. Parce que border et padding font tous deux partie du modèle de boîte, mais margin marque la distance entre la boîte et la boîte . Par conséquent, l’explication de border-box relève du bon sens.
La question est, s'il est parfois nécessaire de paramétrer
margin, comment peut-il obtenir un contrôle libre pour assurer la compatibilité avec ? Par exemple, nous voulons configurer un élément de boîte qui remplit toute la page et qui est interféré par les marges. Comment devons-nous procéder ?
Réalisez les rendus suivants :
Code : Téléchargement du code source
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>yuanxin.me</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#app {
box-sizing: border-box; /* 指定计算方式 */
margin: 10px; /* 外边距干扰 */
/* 利用 css3 的 calc */
width: calc(100vw - 2*10px);
height: calc(100vh - 2*10px);
}
</style>
</head>
<body>
<div id="app">
</div>
</body>
</html> Ainsi, lorsque vous devez calculer la marge, vous pouvez utiliser calc en conjonction avec les quatre opérations arithmétiques () en CSS3.
3. Recommandations d'utilisation
Sur la base de l'expérience d'utilisation dans le projet et des recommandations du w3c, il est recommandé de définir l'attribut
box-sizingsurborder-box.
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!