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 type="x-smartling-placeholder">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 type="x-smartling-placeholder">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:
- Ouvrez les outils de développement.
- Sélectionnez un élément.
- 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; }
Selon vous, quelle sera la largeur de .my-box
?
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.