Quel est le modèle de la boîte

Le modèle de boîte est une manière de décrire l'espace occupé par les éléments HTML sur une page. Le modèle de boîte traite chaque élément HTML comme une boîte rectangulaire, composée de quatre parties principales : zone de contenu, remplissage, bordure et marges. Introduction détaillée : 1. La zone de contenu est la partie de l'élément HTML qui contient réellement du contenu, tel que du texte, des images ou d'autres éléments imbriqués. C'est le cœur du modèle de boîte et détermine le contenu réel affiché par l'élément 2. Le padding est la zone de contenu. L'espace blanc entre la bordure de l'élément et la propriété padding-top en CSS.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

"Box Model" est un concept important en CSS, utilisé pour décrire la façon dont les éléments HTML occupent l'espace sur la page. Le modèle de boîte traite chaque élément HTML comme une boîte rectangulaire composée de quatre parties principales : zone de contenu, remplissage, bordures et marges. Comprendre le modèle de boîte est essentiel au développement front-end, car il détermine la manière dont les éléments de la page sont disposés et rendus. Dans cet article, je vais vous expliquer en détail les différents composants du modèle box et ce qu’ils font.

Composants du modèle de boîte :

Zone de contenu :

La zone de contenu est la partie de l'élément HTML qui contient réellement du contenu, tel que du texte, des images ou d'autres éléments imbriqués. C'est le cœur du modèle de boîte et détermine le contenu réel affiché par l'élément.

Padding :

Padding est l'espace vide entre la zone de contenu et la bordure de l'élément. Il peut être défini en CSS en utilisant des propriétés telles que padding-top, padding-right, padding-bottom et padding-left. Le remplissage contrôle la distance entre le contenu interne d'un élément et sa bordure.

Bordure :

Une bordure est une ligne ou une bordure autour du contenu et du remplissage. Les bordures peuvent être définies en CSS à l'aide de propriétés telles que border-width, border-style et border-color. Il sert à décorer et séparer le contenu d’un élément.

Marge :

La marge est l'espace vide entre la bordure de l'élément et les éléments environnants. Il peut être défini en CSS en utilisant des propriétés telles que margin-top, margin-right, margin-bottom et margin-left. Les marges sont utilisées pour contrôler la distance entre un élément et d'autres éléments.

Comment fonctionne le modèle de boîte :

Lorsque le navigateur affiche la page, il détermine la largeur et la hauteur totales de chaque élément HTML en fonction de la définition du modèle de boîte. Ces dimensions déterminent la position et la disposition des éléments sur la page. Voici comment fonctionne le modèle de boîte :

Largeur totale :

La largeur totale d'un élément est égale à la largeur de la zone de contenu plus la largeur du remplissage gauche et droit et des bordures gauche et droite, plus la largeur de la zone de contenu et marges de droite.

Largeur totale = largeur du contenu + remplissage gauche + remplissage droit + largeur bordure gauche + largeur bordure droite + marge gauche + marge droite

Hauteur totale :

La hauteur totale de l'élément est égale au contenu La hauteur de la zone plus la hauteur du remplissage supérieur et inférieur et des bordures supérieure et inférieure, plus la hauteur des marges supérieure et inférieure.

Hauteur totale = hauteur du contenu + rembourrage supérieur + rembourrage inférieur + hauteur de la bordure supérieure + hauteur de la bordure inférieure + marge supérieure + marge inférieure

Deux normes pour le modèle de boîte :

dans le développement Web, il existe deux modèles de boîte principaux normes : modèle de boîte standard W3C et modèle de boîte IE.

Modèle de boîte standard W3C :

Le modèle de boîte standard W3C définit la largeur et la hauteur d'un élément pour inclure uniquement la zone de contenu. Le remplissage, les bordures et les marges n'affectent pas la largeur et la hauteur globales d'un élément ; ils sont ajoutés à la zone de contenu.

C'est le comportement par défaut des standards du Web et le modèle de boîte adopté par la plupart des navigateurs modernes.

Modèle de boîte IE :

Le modèle de boîte IE comprend la largeur et la hauteur de l'élément, y compris la zone de contenu, le remplissage et la bordure. Les marges n'affectent pas la largeur et la hauteur globales, elles se trouvent à l'extérieur de l'élément.

Il s'agit du modèle de boîte adopté par les premières versions du navigateur Internet Explorer, généralement simulé en utilisant la propriété CSS box-sizing : border-box;.

Façons de contrôler le modèle de boîte :

En CSS, vous pouvez utiliser certaines propriétés et techniques pour contrôler le comportement du modèle de boîte :

propriété box-sizing :

la propriété box-sizing est utilisée pour contrôler le modèle de boîte. comportement du modèle box , qui peut prendre deux valeurs : content-box et border-box.

content-box est la valeur par défaut, utilisant le modèle de boîte standard du W3C, qui spécifie que la largeur et la hauteur de l'élément incluent la zone de contenu, et que le remplissage, la bordure et les marges seront ajoutés en dehors de la zone de contenu.

border-box utilise le modèle de boîte IE, qui spécifie la largeur et la hauteur de l'élément, y compris la zone de contenu, le remplissage et la bordure, tandis que les marges seront ajoutées à l'extérieur de l'élément.

/* 使用box-sizing来指定盒模型的行为 */
.element {
  box-sizing: content-box; /* 默认值，采用W3C标准盒模型 */
}
.element {
  box-sizing: border-box; /* 采用IE盒模型 */
}
padding、border和margin属性：
你可以使用这些属性来控制元素的内边距、边框和外边距的大小。
css
/* 设置内边距 */
.element {
  padding: 10px; /* 上、右、下

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!