Comment utiliser la propriété box-sizing en CSS-tutoriel CSS-php.cn

Comment utiliser la propriété box-sizing en CSS

不言

Libérer： 2018-12-10 09:15:20

original

4848 Les gens l'ont consulté

L'attribut Comment utiliser la propriété Comment utiliser la propriété box-sizing en CSS en CSS peut être utilisé pour définir la taille de la zone de changement. Par exemple, si vous devez placer deux boîtes avec des bordures côte à côte, vous pouvez le faire en définissant box-. dimensionnement à la bordure de la boîte. Ci-dessous, nous examinerons le contenu spécifique.

L'attribut Comment utiliser la propriété Comment utiliser la propriété box-sizing en CSS en CSS est un paramètre utilisé pour modifier le calcul de la taille de la zone. Lorsque vous utilisez les attributs de remplissage et de bordure pour définir l'épaisseur de la marge et de la ligne de bordure, ajoutez les parties de remplissage et de bordure à la largeur et à la bordure. hauteur de la zone. Par conséquent, en fonction des valeurs de remplissage et de bordure, la taille de la zone entière changera.

Comment utiliser la propriété Comment utiliser la propriété box-sizing en CSS en CSS

Cela est dû au fait que la taille de la zone n'inclut pas les valeurs de remplissage et de bordure.

Modifiez les paramètres en fonction de l'attribut Comment utiliser la propriété Comment utiliser la propriété box-sizing en CSS en CSS, et vous pouvez définir le remplissage et la bordure dans la taille de la zone. Cela permet de déterminer la taille de la boîte sans être affecté par le remplissage et les bordures.

Voyons comment utiliser Comment utiliser la propriété Comment utiliser la propriété box-sizing en CSS en CSS

L'attribut Comment utiliser la propriété Comment utiliser la propriété box-sizing en CSS en CSS s'écrit comme suit

Comment utiliser la propriété Comment utiliser la propriété box-sizing en CSS en CSS：value ;

Copier après la connexion

valeur. Peut écrire une zone de contenu et une zone de bordure.

content-box : La largeur et la hauteur sont appliquées respectivement à la zone de contenu de l'élément ; le remplissage et la bordure de l'élément sont dessinés en dehors de la largeur et de la hauteur.

border-box : La largeur et la hauteur définies pour l'élément déterminent la zone de bordure de l'élément, c'est-à-dire que tout remplissage et bordure spécifiés pour l'élément seront dans l'ensemble Draw Within une largeur et une hauteur spécifiées. La largeur et la hauteur du contenu peuvent être obtenues en soustrayant respectivement la bordure et le remplissage de la largeur et de la hauteur définies.

De plus, si vous saisissez hériter, la valeur de l'élément parent est héritée.

Regardons un exemple spécifique

Le code est le suivant

Code HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
  <p class="content1">content-box(初始值)
  的情况下、padding和border不包括在width和height之中</p>
<p class="content2">border-box的情况下、padding和border包括在width和height之中</p>
</body>
</html>

Copier après la connexion

Définissez la largeur et height complètement Pour les deux mêmes cases (largeur 400px, hauteur 150px), la première case est définie sur la valeur initiale content-box et la seconde case est définie sur la valeur border-box.

Code CSS

p.content1 {
width: 400px; 
height: 150px; 
background-color:#f0f8ff;
border: 30px solid #4169e1; 
padding: 10px;
Comment utiliser la propriété Comment utiliser la propriété box-sizing en CSS en CSS: content-box;
}
p.content2 {
width: 400px; 
height: 150px; 
background-color:#f0f8ff;
border: 30px solid #4169e1; 
padding: 10px;
Comment utiliser la propriété Comment utiliser la propriété box-sizing en CSS en CSS: border-box;
}

Copier après la connexion

Résultat d'exécution

L'effet suivant sera affiché sur le navigateur

Comment utiliser la propriété Comment utiliser la propriété box-sizing en CSS en CSS