Modèle Box

Podcast CSS – 001: The Box Model

Supposons que vous avez ce bit de code HTML:

<p>I am a paragraph of text that has a few words in it.</p>

Ensuite, écrivez le code CSS suivant:

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

La largeur du contenu est de 142 pixels, au lieu de la taille de 100 pixels spécifiée. sort de votre élément. Pourquoi ?

Le modèle en boîte est un élément de base du CSS. Comprendre comment le modèle de boîte et, surtout, comment elle est affectée par d'autres aspects du CSS le contrôle et vous aider à écrire du code CSS plus prévisible.

N'oubliez pas que tout ce qui est affiché par CSS est une boîte, même si S'il s'agit d'un simple texte, ou si un élément border-radius le fait ressembler à un cercle.

Contenu et taille

Les boîtes ont un comportement différent en fonction de leur valeur display, leur ensemble de variables et le contenu qu'elles contiennent. Ce contenu peut être du texte brut ou de zones supplémentaires générées par les éléments enfants. Dans tous les cas, le contenu a une incidence sur la taille de la zone par défaut.

Vous pouvez contrôler ce paramètre à l'aide du dimensionnement extérieur ou du dimensionnement intrinsèque. pour laisser le navigateur prendre des décisions en fonction de la taille du contenu.

Voici une démonstration basique qui explique cette différence:

La démo contient les mots "CSS isAwesome" (Le CSS est génial) dans une boîte de dimensions fixes avec une bordure épaisse. La boîte ayant une largeur spécifiée, elle est de taille extrinsque. Cela signifie qu'il contrôle le dimensionnement du contenu enfant. Toutefois, le mot "génial" est trop grande pour la zone et qu'elle déborde donc du cadre cadre de bordure (nous y reviendrons plus en détail ultérieurement). Une façon d'éviter ce dépassement est de laisser la boîte peut être dimensionnée intrinsèquement en ne définissant pas la largeur ou, dans ce cas, en définissant width sur min-content. Le mot clé min-content indique à la zone avoir la largeur minimale intrinsèque de son contenu (l'expression "génial"). Cela permet à la zone de s'adapter parfaitement au texte.

Voici un exemple plus complexe qui montre l'impact de différentes tailles contenu:

Activez ou désactivez le dimensionnement intrinsèque pour découvrir les avantages du dimensionnement externe. grâce au dimensionnement extérieur et intrinsèque, le contenu le contrôle. Pour voir les effets, ajoutez quelques phrases de texte à la fiche. Lorsque cet élément a une taille externe, la quantité de contenu peut être ajoutée avant son dépassement, mais cela ne se produit pas lorsque le dimensionnement intrinsèque est activée.

Par défaut, les valeurs width et height de cet élément sont définies sur 400px. Ces dimensions définissent des limites strictes pour tout ce qui se trouve à l'intérieur de l'élément, est honoré, sauf si le contenu est trop volumineux pour la zone. Vous pouvez le voir en action en remplaçant la légende située sous l'image de fleur par une valeur qui dépasse hauteur de la boîte.

Terme clé: Le dépassement se produit lorsque le contenu est trop volumineux par rapport à la zone dans laquelle il se trouve. Vous pouvez gérer la façon dont un élément gère le contenu de dépassement à l'aide de la propriété overflow.

Le passage au dimensionnement intrinsèque permet au navigateur de prendre des décisions la taille du contenu de la zone. Cela rend le risque de débordement beaucoup moins probable, car la boîte est redimensionnée avec son contenu.

N'oubliez pas que le dimensionnement intrinsèque est le paramètre par défaut du navigateur. et offre généralement beaucoup plus de flexibilité que le dimensionnement externe.

Zones du modèle en boîte

Les boîtes sont composées de zones distinctes de modèle de cases qui remplissent toutes un rôle spécifique.

</ph>

La zone de contenu correspond à la zone dans laquelle se trouve le contenu. Le contenu peut contrôler la taille de son parent, il s’agit donc généralement de la zone de taille la plus variable.

La zone de marge intérieure entoure la zone de contenu et correspond à l'espace créé par la propriété padding. Comme la marge intérieure se trouve à l'intérieur de la zone, son arrière-plan est visible dans l'espace. qu'il crée. Si la boîte comporte des règles de dépassement de capacité définies, telles que overflow: auto ou overflow: scroll, les barres de défilement occupent également cet espace.

La cadre de bordure entoure la zone de marge intérieure. Son espace est défini par la border, qui crée un cadre visuel pour l'élément. Le bordure de l'élément correspond au limite de ce que vous pouvez voir.

La dernière zone, la zone de marge, correspond à l'espace autour de votre boîte, défini par le la règle margin de la boîte. Des propriétés telles que outline et box-shadow occupent également cet espace, car elles sont peintes par-dessus l'élément affectent la taille de la boîte. Modification du paramètre outline-width sur 200px de votre zone sur une boîte ne change rien à l'intérieur du bord de la bordure.

Une analogie utile

Le modèle en boîte est complexe à comprendre. Voici donc une analogie appris jusqu’à présent.

</ph>

Dans ce schéma, trois cadres photo montés l'un à côté de l'autre sur une le mur. Les éléments de l'image encadrée correspondent au modèle de boîte, comme suit:

• La zone de contenu correspond à l'illustration.
• La zone de rembourrage correspond à la plaque de montage blanche, située entre le cadre et l'œuvre d'art.
• Le cadre correspond à la bordure et constitue la bordure littérale de l'œuvre d'art.
• La zone de marge est l'espace entre les cadres.
• L'ombre occupe le même espace que la zone de marge.

Déboguer le modèle de boîte

Les outils de développement sur le navigateur fournissent une visualisation du modèle de boîte d'un cadre sélectionné des calculs, qui peuvent vous aider à comprendre le fonctionnement du modèle de boîte affecte le site Web sur lequel vous travaillez.

Essayez dans votre propre navigateur:

1. Ouvrez les outils de développement.
2. Sélectionnez un élément.
3. Afficher le débogueur de modèles en boîte

Contrôler le modèle de boîte

Pour comprendre comment contrôler le modèle en boîte, vous devez d'abord savoir se passe dans votre navigateur.

Chaque navigateur applique une feuille de style user-agent aux documents HTML l'apparence et le comportement des éléments sans CSS défini. Le CSS de les feuilles de style user-agent varient d'un navigateur à l'autre, mais elles fournissent pour faciliter la lecture du contenu.

L'une des propriétés de la feuille de style user-agent définit le display par défaut d'une zone. Pour Par exemple, dans un flux normal, la valeur display par défaut d'un élément <div> est block, <li> a une valeur display par défaut de list-item, et <span> a une valeur display par défaut de inline.

Un élément inline a une marge de bloc, mais les autres éléments ne la respectent pas. Avec inline-block, les autres éléments respectent la marge du bloc, mais le premier conserve la plupart des comportements de l'élément inline. Par défaut, un élément block remplit l'espace intégré disponible, alors que La taille des éléments inline et inline-block dépend de leur contenu.

La feuille de style du user-agent définit également box-sizing, qui indique à une zone comment calculer la taille de sa boîte. Par défaut, tous les éléments possèdent le user-agent suivant style: box-sizing: content-box;. Ainsi, lorsque vous définissez des dimensions comme width et height, ces dimensions s'appliquent à la zone de contenu. Si vous puis définissez padding et border, ces valeurs sont ajoutées au champ la taille de l'image.

Testez vos connaissances

Testez vos connaissances sur l'impact de la taille du modèle de boîte sur les propriétés.

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

La largeur réelle de cette boîte est de 260 pixels. Comme le CSS utilise la valeur par défaut box-sizing: content-box, la largeur appliquée est la suivante : la largeur du contenu, et les valeurs padding et border des deux côtés sont ajoutées à ça. 200 pixels pour le contenu + 40 pixels de marge intérieure + 20 pixels de bordure constituent un total visible de 260 pixels.

Vous pouvez modifier cela en spécifiant le dimensionnement de border-box:

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

Ce modèle de zone alternatif indique au CSS d'appliquer width à la zone de bordure au lieu de la zone de contenu. Autrement dit, border et padding reçoivent transmis. Ainsi, lorsque vous définissez .my-box sur 200px de large, il affiche avec une largeur de 200px.

Découvrez comment cela fonctionne dans la démo interactive suivante. Lorsque vous activez box-sizing, la zone bleue indique quel CSS est appliqué à l'intérieur de la .

*,
*::before,
*::after {
  box-sizing: border-box;
}

Cette règle CSS sélectionne tous les éléments du document et chaque pseudo-élément ::before et ::after, et applique box-sizing: border-box. Cela signifie que chaque élément utilise désormais ce modèle de boîte alternatif.

Étant donné que le modèle de boîte alternatif peut être plus prévisible, les développeurs ajoutent souvent cette règle afin de procéder à des réinitialisations et à des normaliseurs, comme celle-ci.

Ressources

• Présentation du modèle de boîte
• Que sont les outils pour les développeurs de navigateurs ?

Feuilles de style user-agent

• Chromium
• Firefox
• Webkit