Aperçu — 6.1 — Display : le comportement des boîtes — Yekola

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 6 : Display et positionnement Aperçu gratuit

6.1 — Display : le comportement des boîtes

📋 Objectifs d'apprentissage

Distinguer block, inline, inline-block
Utiliser display: none vs visibility: hidden
Maîtriser position: relative, absolute, fixed, sticky

Display : comment l'élément se comporte

Valeur	Comportement	Exemples
block	Prend toute la largeur, saut de ligne	div, p, h1, section
inline	Juste la largeur du contenu	span, a, strong
inline-block	Inline mais accepte width/height	Boutons, cartes
none	Disparaît (espace aussi)	Cacher/montrer

Position : où se place l'élément

position: static;   /* Normal (défaut) */
position: relative; /* Décalé par rapport à sa position normale */
position: absolute; /* Positionné par rapport au parent positionné */
position: fixed;    /* Fixé par rapport à l'écran (ne bouge pas) */
position: sticky;   /* Collant : fixed + relative */

💡 Menu sticky

header { position: sticky; top: 0; } — Le menu reste collé en haut de l'écran quand on scroll. Effet professionnel en 2 lignes de CSS.

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