Comment le CSS place les éléments
Chaque élément d'une page est une boîte rectangulaire, et la mise en page décide de sa taille et de sa place. Le modèle de boîte, flexbox et la grille CSS sont les trois outils de base pour y parvenir.
Quand on les comprend, on sait pourquoi une boîte de 200 pixels de large occupe en réalité davantage, et comment aligner des cartes sans calcul.
À la fin de cette leçon
Remarque
Je peux mettre en page une page avec le modèle de boîte, flexbox et la grille.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Modèle de boîte | le contenu, le remplissage, la bordure et la marge | |
| Remplissage | l'espace entre le contenu et la bordure | padding: 10px |
| Marge | l'espace à l'extérieur de la bordure | margin: 10px |
| Flexbox | une mise en page qui range des éléments en ligne ou en colonne | |
| Grille | une mise en page en lignes et en colonnes | |
| Pixel | un point de l'écran, noté px |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Une boîte a quatre couches
De l'intérieur vers l'extérieur, une boîte a quatre couches : le contenu, le remplissage (padding), la bordure (border) et la marge (margin). Le remplissage est à l'intérieur de la bordure, la marge est à l'extérieur.
La propriété width règle la largeur du contenu. Le remplissage, la bordure et la marge s'ajoutent de chaque côté.
Exemple : la largeur réelle de la boîte
| Couche | Valeur | Ajouté des deux côtés |
|---|---|---|
| Contenu (width) | 200 px | 200 px |
| Remplissage (padding) | 20 px | 40 px |
| Bordure (border) | 5 px | 10 px |
| Marge (margin) | 10 px | 20 px |
| Total occupé | La somme | 270 px |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Border-box met le remplissage dans la largeur
Par défaut, box-sizing vaut content-box : la largeur ne compte que le contenu, et la boîte du tableau occupe 270 pixels. Avec box-sizing: border-box, la largeur compte le contenu, le remplissage et la bordure.
La même boîte occupe alors 200 pixels, plus 20 pixels de marge, soit 220 pixels. Beaucoup de feuilles de style choisissent border-box, car le calcul est plus simple.
Exemple : deux boîtes, deux calculs
<div class="a">content-box : 200 px de contenu</div>
<div class="b">border-box : 200 px en tout</div>Avant de lancer les Run
Remarque
Démarrez le labo et ouvrez le terminal. Les Run lisent la feuille style.css de la page d'exemple avec grep, un outil qui affiche les lignes qui contiennent un mot.
Voir les lignes qui règlent un remplissage
docker exec jupyter grep -n "padding" site/style.cssAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Voir la largeur maximale de la page
docker exec jupyter grep -n "max-width" site/style.cssAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Voir qui change la façon d'afficher
docker exec jupyter grep -n "display" site/style.cssAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Ce que disent les trois commandes
Le premier Run affiche six lignes de padding, par exemple padding: 0.5rem 0.75rem pour les plats. Le second affiche max-width: 40rem : le contenu ne dépasse jamais 40 rem de large.
Le troisième affiche une seule ligne, display: none, qui cache un plat filtré. Cette page n'utilise ni flexbox ni grille : la suite les montre à part.
Flexbox range en ligne ou en colonne
Avec display: flex sur un conteneur, ses enfants se rangent côte à côte. gap règle l'espace entre eux. justify-content les répartit sur la ligne, flex-direction: column les range en colonne.
Flexbox convient aux barres de navigation et aux rangées de cartes qui se partagent la place.
Exemple : trois plats côte à côte
<div class="rangee">
<div class="carte">Soupe</div>
<div class="carte">Gratin</div>
<div class="carte">Tarte</div>
</div>La grille place en lignes et colonnes
Avec display: grid, on définit les colonnes avec grid-template-columns. La valeur 1fr 1fr 1fr fait trois colonnes de même largeur. Les éléments remplissent les cases l'un après l'autre.
La grille convient quand la mise en page a deux dimensions, comme une galerie ou un tableau de bord. Flexbox convient quand il n'y a qu'une ligne ou une colonne.
Exemple : six plats sur trois colonnes
<div class="menu">
<div>Soupe</div><div>Gratin</div><div>Tarte</div>
<div>Salade</div><div>Quiche</div><div>Flan</div>
</div>Une erreur fréquente
Attention
Beaucoup pensent que width: 200px donne une boîte de 200 pixels. En content-box, c'est le contenu seul qui fait 200 pixels. Ajoutez le remplissage, la bordure et la marge pour savoir la place prise, ou choisissez border-box.