Retour
Module 1 : Introduction à CSS
1.1 — Lier CSS à HTML Aperçu
🛠️ Projet 1 — Première mise en forme
Module 2 : Sélecteurs CSS
2.1 — Tous les types de sélecteurs Aperçu
🛠️ Projet 2 — Ciblage précis
Module 3 : Couleurs, fonds et dégradés
3.1 — Maîtriser les couleurs CSS Aperçu
🛠️ Projet 3 — Hero section
Module 4 : Typographie web
4.1 — Polices et texte Aperçu
🛠️ Projet 4 — Article typographié
Module 5 : Box Model — Le modèle de boîte
5.1 — Comprendre le Box Model Aperçu
🛠️ Projet 5 — Cartes produit
Module 6 : Display et positionnement
6.1 — Display : le comportement des boîtes Aperçu
🛠️ Projet 6 — Layout avec position
Module 7 : Flexbox — Layout flexible
7.1 — Flexbox fondamental Aperçu
🛠️ Projet 7 — Page centrée
Module 8 : Flexbox avancé
8.1 — Contrôler les enfants flex Aperçu
🛠️ Projet 8 — Layout 3 colonnes
Module 9 : CSS Grid — Layout en grille
9.1 — Grid fondamental Aperçu
🛠️ Projet 9 — Dashboard Grid
Module 10 : CSS Grid avancé
10.1 — Grid Areas et responsive Aperçu
🛠️ Projet 10 — Galerie auto-responsive
Module 11 : Responsive Design — Media Queries
11.1 — @media et breakpoints Aperçu
🛠️ Projet 11 — Site responsive
Module 12 : Mobile First — Approche pratique
12.1 — Techniques Mobile First Aperçu
🛠️ Projet 12 — Menu hamburger
Module 13 : Transitions et animations CSS
13.1 — Transitions et keyframes Aperçu
🛠️ Projet 13 — Page animée
Module 14 : Pseudo-classes et pseudo-éléments
14.1 — Pseudo-classes et pseudo-éléments Aperçu
🛠️ Projet 14 — Tableau stylé
Module 15 : Variables CSS et organisation
15.1 — CSS propre et scalable Aperçu
🛠️ Projet 15 — Design system
Module 16 : Projet final — Site responsive complet
16.1 — Site responsive professionnel Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement
Module 5 : Box Model — Le modèle de boîte Aperçu gratuit

5.1 — Comprendre le Box Model

📋 Objectifs d'apprentissage

  • Comprendre margin, border, padding, content
  • Utiliser box-sizing: border-box
  • Calculer la taille réelle d'un élément
📦 Box Model CSS margin border padding content margin (extérieur) → border → padding → content (intérieur) width: 300px + padding: 20px×2 + border: 2px×2 = 344px réels (si content-box) Avec box-sizing: border-box → width: 300px = tout inclus ✅

Le Box Model : tout est une boîte

Chaque élément HTML est une boîte rectangulaire composée de 4 couches : content (le contenu), padding (espace intérieur), border (bordure), margin (espace extérieur).

box-sizing: border-box — toujours l'utiliser

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

Sans border-box, width: 300px + padding crée une largeur > 300px. Avec border-box, le padding et la bordure sont INCLUS dans le width. C'est la règle CSS la plus importante à retenir.

🔑 À retenir

Mettez box-sizing: border-box en haut de TOUS vos fichiers CSS. Sans ça, vos calculs de largeur seront faux et votre mise en page cassera.

Ceci est un aperçu gratuit.
Voir la formation complète