| title | CSS 3 : Box model |
|---|---|
| description | Découvre comment les navigateurs interprètent nativement les différentes balises HTML et quelles sont les premières propriétés CSS à connaître. |
| show_toc | true |
- Connaître les principes du box model en CSS
- Manipuler les propriétés liées au box model
Tous les éléments CSS peuvent être assimilés à des boîtes dont les propriétés (taille, forme, etc.) sont décidées par le développeur. La vidéo ci-dessous te donne un aperçu de ce box model.
{:.alert-info}
Présentation simple et efficace du box model en 8 minutes Voir la vidéo
Sur la vidéo précédente, les explications sont faites à partir d'éléments interprétés nativement avec la propriété display: block;. Cette propriété concerne les balises <p>, <div>, les intertitres <h1>, <h2>, … et plein d'autres encore. Les balises <a>, <span>, <em> ou encore <strong> seront quant à elles, interprétées avec la propriété display: inline;.
Consulte la vidéo suivante pour bien comprendre la différence entre ces deux types d'affichage et les subtilités de leur box model.
{:.alert-info}
🗝️ Complète en lisant ce chapitre qui te donne les clés principales de toutes les boîtes et notamment la section display pour encore plus de détails.
En parallèle de ta lecture, garde sous le coude ce guide, qui offre des exemples visuels des propriétés du box model, et n'hésite pas à le consulter si nécessaire.
{% capture quiz_data %} [{"question":"En CSS, la boîte de modèle fait référence","options":["à l'apparence d'un élément HTML","aux propriétés définissant l'espace occupé par un élément HTML","à la taille d'un élément HTML","à la couleur d'un élément HTML"],"correct":1},{"question":"Par défaut dans les navigateurs, les valeurs des propriétés padding et border viennent s'ajouter à la largeur (width) et à la hauteur (height) des éléments HTML","options":["vrai, la boîte de contenu (content-box) est le modèle standard","faux, cela dépend des unités utilisées"],"correct":0},{"question":"Pour ne pas ajouter les valeurs des propriétés padding et border aux tailles des boîtes, on peut utiliser","options":["width: auto; height: auto;","box-sizing: border-box (c'est le modèle alternatif)"],"correct":1},{"question":"Parmi les éléments ci-dessous, quels sont ceux qui utilisent le positionnement display: block par défaut","options":["div","h1, h2, etc.","p","a","span","em","ul"],"correct":[0,1,2,6]}] {% endcapture %} {% include quiz.html data=quiz_data %}
La dernière question de ce quiz était peut-être alambiquée 🙃. 💡 Pour connaître les valeurs par défaut des éléments HTML, tu peux te servir de l'inspecteur de ton navigateur. Pour cela, repère user agent stylesheet dans l'onglet Styles. Par exemple, si tu fais un clic-droit sur la liste à puce ci-dessous pour l'inspecter, tu liras parmi les propriétés, la propriété
display: blockdéfini par défaut pour l'élément ul.
- item 1
- item 2
- …
(Active l'option « afficher les styles du navigateur » via les paramètres si tu utilises Firefox).
{:.alert-info}
👉 Interneting Is Hard - CSS box model
Un superbe tutoriel pour tout apprendre sur le box model.
Lorsque tu dois intégrer une maquette à partir d'une image (jpeg, png, etc.) ou d'un fichier (ai, pdf, ...), tu n'as pas systématiquement accès aux dimensions et unités utilisées concernant le box-model.
Le piège à éviter est d'indiquer des unités fixes, comme le pixel (px) par exemple. Si tu commences à définir des largeurs ou autres propriétés de boîtes telles que width: 253px ou margin-left: 27px c'est que tu n'es probablement pas sur le bon chemin et que tu es en train de faire du bricolage. Ta page ne s'adaptera pas correctement aux différentes largeurs d'écran (responsive) ou aux niveaux de zoom des utilisateurs (accessibilité).
Par défaut, les navigateurs affichent des tailles de polices de caractère à 16px. Certains utilisateurs ont besoin de modifier ce réglage. Utiliser l'unité rem t'assure que les proportions seront conservées.
De manière générale, il est conseillé d'utiliser l'unité % pour les largeurs de boîtes (et encore, bien souvent laisser la largeur se calculer "toute seule" sera une meilleure solution), et rem pour les unités de padding, margin et font-size. Ces deux unités sont du type relatif (proportionnel).
Suis cette ressource pour comprendre les unités disponibles en css.
- 1rem = 16px (réglage par défaut des navigateurs). Donc 8px peut s'écrire
.5rem, 24px :1.5rem, etc. - préfère l'unité
%lorsque tu dois définir les largeurswidthde tes boîtes. {:.alert-info}
Maintenant que tu as manipulé le box model, peut-être t'es-tu rendu compte (et si ce n'est pas déjà le cas, cela ne saurait tarder) que centrer un élément en CSS peut s'avérer être une entreprise étonnamment compliquée. Il existe de nombreuses façons de procéder notamment en utilisant l'affichage flex ou grid, mais nous parlerons de ces derniers dans une prochaine ressource.
Pour le moment, la ressource suivante nous montre comment y parvenir uniquement à partir d'élément de type block ou inline et cela s'avère très souvent bien suffisant.
{:.alert-info}
👉 CSS-Tricks - Centering in CSS: A Complete Guide.
Beau et hyper-utile.
C'est l'heure d'empiler les petites boîtes ! Commence par copier le code suivant dans un fichier HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<h1>The box model</h1>
<p>
Lorem ipsum dolor sit amet <a href="#">this link is in a paragraph</a> consectetur adipisicing elit. Autem id suscipit quam dolorem? Dolorum dolor dicta impedit tempora distinctio natus! Distinctio commodi asperiores ipsum voluptates assumenda dolores ipsam perspiciatis adipisci!
</p>
<p>
Exercitationem itaque harum repellendus ducimus corporis quaerat ab magni dignissimos vero beatae veniam nulla, aliquam totam corrupti recusandae officiis. Magni unde tempore sed repellat laborum distinctio neque id, nam ex?
</p>
<a href="">Read more</a>
</main>
</body>
</html>Dans le même dossier, crée un fichier style.css et insère le code suivant :
* {
box-sizing: border-box;
}
body {
margin: 0;
line-height: 1.5;
background-color: grey;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}Utilise les propriétés du box model fraîchement vues dans cette ressource (display, margin, padding, etc.) pour modifier le fichier style.css de manière à ce que la page web reproduise cette capture écran.
- Entre le titre et les paragraphes, seul le titre est centré.
- Le contenu principal (sur fond blanc) doit être au centre de la page, peu importe la largeur de ton écran, et sa largeur ne doit pas dépasser 800px.
- Les paragraphes et le bouton Read more ont suffisamment d'espace entre eux ainsi qu'avec les bords de leur parent.
Tips :
- Le code du violet : #a306b6
- Tu ne devrais pas avoir à modifier le code HTML fourni.
- 🕵️♂️ N'hésite pas à utiliser l'inspecteur de ton navigateur pour expérimenter l'ajout, la suppression ou la modification des propriétés CSS de tes boîtes lorsque tu écris la feuille de style.
Voir la solution{:.alert-info}