Quels sont les modèles de boîtes CSS ?

Le modèle de boîte CSS comprend le modèle de boîte standard et le modèle de boîte IE. Introduction détaillée : 1. Le modèle de boîte standard est le modèle de boîte par défaut de CSS. Il définit la largeur et la hauteur de l'élément comme la largeur et la hauteur de la zone de contenu. l'élément est égal à la largeur de la zone de contenu et à la hauteur plus la largeur du remplissage, des bordures et des marges ; 2. Le modèle de boîte IE est le modèle de boîte utilisé par le navigateur Internet Explorer, la largeur et la hauteur. de l'élément sont définis comme la largeur et la hauteur de la zone de contenu plus le remplissage et la largeur de la bordure.

Le modèle de boîte de CSS signifie que dans la mise en page d'une page Web, l'élément est considéré comme une boîte rectangulaire. Cette boîte contient du contenu, du remplissage, des bordures et des marges. Il existe deux types de modèles de boîtes CSS : le modèle de boîte standard et le modèle de boîte IE.

1. Modèle de boîte standard :

Le modèle de boîte standard est le modèle de boîte par défaut de CSS, qui définit la largeur et la hauteur de l'élément comme la largeur et la hauteur de la zone de contenu. Dans le modèle de boîte standard, la largeur totale et la hauteur totale d'un élément sont égales à la largeur et à la hauteur de la zone de contenu plus la largeur du remplissage, des bordures et des marges.

2. Modèle de boîte IE :

Le modèle de boîte IE est le modèle de boîte utilisé par le navigateur Internet Explorer. Dans le modèle de boîte IE, la largeur et la hauteur d'un élément sont définies comme la largeur et la hauteur de la zone de contenu plus la largeur du remplissage et des bordures. Dans le modèle de boîte IE, la largeur totale et la hauteur totale d'un élément sont égales à la largeur et à la hauteur de la zone de contenu, à l'exclusion de la largeur des marges.

Pour mieux comprendre la différence entre ces deux modèles de boîte, nous pouvons l'illustrer avec l'exemple suivant :

Code HTML :

html
<div id="box">Hello World</div>
```
CSS代码：
```css
#box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

Dans le modèle de boîte standard, la largeur totale et la hauteur totale de l'élément sont égales à la largeur de la zone de contenu et de la hauteur ainsi que de la largeur du remplissage, des bordures et des marges. Ainsi, la largeur totale de cet élément est de 200 px + 2 * 20 px + 2 * 1 px + 2 * 10 px = 282 px, et la hauteur totale est de 100 px + 2 * 20 px + 2 * 1 px + 2 * 10 px = 172 px.

Dans le modèle de boîte IE, la largeur totale et la hauteur totale d'un élément sont égales à la largeur et à la hauteur de la zone de contenu plus la largeur du remplissage et des bordures. Ainsi, la largeur totale de cet élément est de 200 px + 2 * 20 px + 2 * 1 px = 242 px, et la hauteur totale est de 100 px + 2 * 20 px + 2 * 1 px = 142 px.

On peut constater qu'il existe des différences entre le modèle de boîte standard et le modèle de boîte IE lors du calcul de la largeur totale et de la hauteur totale des éléments.

Dans le développement réel, nous pouvons contrôler le modèle de boîte qu'un élément utilise grâce à la propriété box-sizing de CSS. La propriété box-sizing a deux valeurs : content-box et border-box. content-box est le modèle de boîte standard et border-box est le modèle de boîte IE. La valeur par défaut est content-box.

Par exemple, si nous voulons utiliser le modèle de boîte IE, nous pouvons définir l'attribut box-sizing sur border-box :

css
#box {
  box-sizing: border-box;
}

Résumé :

Il existe deux types de modèles de boîte en CSS : le modèle de boîte standard et IE modèle de boîte. Le modèle de boîte standard définit la largeur et la hauteur d'un élément comme la largeur et la hauteur de la zone de contenu, tandis que le modèle de boîte IE définit la largeur et la hauteur d'un élément comme la largeur et la hauteur de la zone de contenu plus la largeur du remplissage. et les frontières. Dans le développement réel, nous pouvons contrôler le modèle de boîte qu'un élément utilise grâce à la propriété box-sizing de CSS.

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!