Un examen plus approfondi de la propriété CSS3 border-sizing-tutoriel CSS-php.cn

Un examen plus approfondi de la propriété CSS3 border-sizing

青灯夜游

Libérer： 2020-12-23 10:45:31

avant

2133 Les gens l'ont consulté

Un examen plus approfondi de la propriété CSS3 border-sizing

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 :

Un examen plus approfondi de la propriété CSS3 border-sizing

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>

Copier après la connexion

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-sizing sur border-box.

* {
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}

Copier après la connexion

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!

Un examen plus approfondi de la propriété CSS3 border-sizing

1. Explication de l'attribut

content-box

border-box

2 Compte tenu du modèle de boîte margin

3. Recommandations d'utilisation

`content-box`

`border-box`

2 Compte tenu du modèle de boîte `margin`