Explication détaillée du dimensionnement de la propriété CSS-tutoriel CSS-php.cn

Explication détaillée du dimensionnement de la propriété CSS

Guanhui

Libérer： 2020-05-09 09:43:05

avant

8386 Les gens l'ont consulté

Modèle de boîte CSS

Vous devez d'abord comprendre le modèle de boîte CSS

Les règles de calcul de la largeur et de la hauteur dans le modèle de boîte CSS :

En CSS, la largeur et la hauteur que vous définissez pour un élément ne s'appliqueront qu'à la zone de contenu de cet élément. Si cet élément a des bordures ou un remplissage, la largeur et la hauteur de la boîte lorsqu'elle est dessinée à l'écran seront ajoutées aux valeurs de bordure et de remplissage définies.

Ce qui suit est un exemple

Lorsque le remplissage et la bordure ne sont pas ajoutés

<body>
  <div class="wrapper"></div>
</body>

Copier après la connexion

rrree

Explication détaillée du dimensionnement de la propriété CSS

À ce stade, la largeur et la hauteur du L'élément div.wrapper est 100* 100

Explication détaillée du dimensionnement de la propriété CSS

Modèle de boîte de l'élément wrapper

Lors de l'ajout de styles de remplissage et de bordure à div.wrapper element

*{
      margin:0;
      padding:0;
    }
    body{
      border:1px solid blue;
      margin:10px;
    }
    .wrapper{
      width:100px;
      height:100px;
      background:pink;
    }

Copier après la connexion

Explication détaillée du dimensionnement de la propriété CSS

À l'heure actuelle, la largeur et la hauteur de l'élément div.wrapper sont de 122*122 car un remplissage de 10 pixels et une bordure de 1 pixel sont ajoutés. à l'élément, vous pouvez voir la zone rose à ce moment-là. Elle va être plus grande

Explication détaillée du dimensionnement de la propriété CSS

Remarque : la marge n'affectera pas la largeur et la hauteur de l'élément. . Bien que la marge soit également définie ici, la marge n'est pas ajoutée à la largeur et à la hauteur de l'élément. La valeur de

attribut box-sizing

1. . À quoi sert l'attribut box-sizing ?

L'attribut box-sizing est une méthode utilisée pour modifier la largeur et la hauteur calculées des éléments dans le modèle de boîte CSS

2 La valeur de box-sizing

content -. box

est la valeur par défaut. Si vous définissez la largeur d'un élément sur 100 px, la zone de contenu de l'élément aura une largeur de 100 px et la largeur des bordures et du remplissage sera ajoutée à la dernière largeur dessinée de l'élément.

border-box

Si vous définissez la largeur d'un élément sur 100px, alors ces 100px incluront sa bordure et son remplissage, et la largeur réelle de la zone de contenu sera la largeur moins la bordure + valeur calculée de remplissage.

3. Utilisez l'attribut box-sizing

Utilisez border-box

.wrapper{
      width:100px;
      height:100px;
      background:pink;
      padding:10px;
      border:1px solid black;
      margin:10px;
    }

Copier après la connexion

rrree

Explication détaillée du dimensionnement de la propriété CSS

À ce stade, la largeur et la hauteur du L'élément div.wrapper est toujours de 100 * 100, mais la largeur et la hauteur de la zone de contenu réelle deviennent 78 * 78. La largeur et la hauteur de l'élément incluent la largeur et la hauteur du contenu réel ainsi que les valeurs de bordure et de remplissage.

Explication détaillée du dimensionnement de la propriété CSS

Utiliser content-box

Prenez l'exemple ci-dessus comme exemple, changez simplement la valeur de box-sizing en content- box

<body>
  <div class="wrapper"></div>
</body>

Copier après la connexion

Explication détaillée du dimensionnement de la propriété CSS

pour voir La zone rose est redevenue plus grande À ce stade, la largeur et la hauteur de l'élément div.wrapper sont de 122*122, et la largeur et. la hauteur du contenu est toujours de 100*100

Explication détaillée du dimensionnement de la propriété CSS