Fiche de révision : CSS
Mise à jour le 7 août 2026
Le badge dans une carte, un cas classique
.carte { position: relative; }
.badge { position: absolute; top: 0; right: 0; }Trois colonnes égales
.conteneur {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}Astuce
Trois réflexes couvrent une bonne partie des surprises de débutant : box-sizing: border-box pour une largeur prévisible, position: relative sur le conteneur avant tout enfant absolute, et justify-content/align-items jamais confondus.
L'essentiel
Quelle est la différence entre une classe (.exemple) et un identifiant (#exemple) ?
Une classe peut s'appliquer à plusieurs éléments et se réutilise librement. Un identifiant devrait rester unique dans toute la page.
Dans quel ordre s'empilent les couches du modèle de boîte, de l'intérieur vers l'extérieur ?
Contenu, padding, bordure, marge. Le padding sépare le contenu de la bordure, la marge sépare la bordure des éléments voisins.
Que change box-sizing: border-box ?
La largeur déclarée (width) inclut alors le padding et la bordure, au lieu de s'ajouter en plus comme avec le comportement par défaut (content-box).
Quelle est la différence entre justify-content et align-items en Flexbox ?
justify-content répartit les enfants sur l'axe principal (horizontal par défaut). align-items les aligne sur l'axe perpendiculaire (vertical par défaut).
Quelle est la différence fondamentale entre Flexbox et Grid ?
Flexbox aligne des éléments sur une seule dimension (une ligne ou une colonne). Grid organise lignes et colonnes simultanément, en deux dimensions.
Par rapport à quoi se positionne un élément en position: absolute ?
Par rapport à son ancêtre positionné le plus proche (relative, absolute ou fixed), ou au document entier à défaut d'un tel ancêtre.
Que fait @media (max-width: 600px) { ... } ?
Applique les règles à l'intérieur uniquement quand la largeur de la fenêtre est de 600 pixels ou moins.
Quelle est la différence entre une transition et une animation (@keyframes) ?
Une transition adoucit un changement déclenché ailleurs (:hover, une classe ajoutée). Une animation @keyframes définit une séquence autonome, qui peut démarrer seule sans déclencheur.