EX 02 — Box Model

2.1

Comprendre le Box Model

content-box vs border-box

⏱ 15 min

Q1Largeur totale avec box-sizing: content-box — width 300px, padding 20px, border 5px, margin 15px

CALCUL

/* box-sizing: content-box (défaut) */ /* Le width ne concerne QUE le contenu */ Largeur visible = width + padding×2 + border×2 = 300px + 20px + 20px + 5px + 5px = 350px Largeur totale (avec marges) = 350px + 15px + 15px = 380px

VISUALISATION

margin: 15px

border: 5px · padding: 20px

width: 300px

Contenu (300px)

Border + Padding → 350px visible

Margin → 380px total

Q2Largeur totale avec box-sizing: border-box

CALCUL

/* box-sizing: border-box */ /* Le width inclut padding ET border */ Largeur visible = 300px (padding et border inclus dans le width) Contenu réel = 300px − 20px − 20px − 5px − 5px = 250px Largeur totale (avec marges) = 300px + 15px + 15px = 330px

Q3Reset CSS universel pour box-sizing

SOLUTION CSS

/* Reset moderne recommandé */ *, *::before, *::after { box-sizing: border-box; }

Pourquoi inclure ::before et ::after ? Les pseudo-éléments génèrent du contenu avec leur propre box model — sans ce reset, ils héritent de content-box au lieu d'utiliser border-box.

2.2

Centrer un élément

Horizontalement et verticalement

⏱ 10 min

Q4Centrer un <div> de 600px horizontalement, puis aussi verticalement

SOLUTION CSS

/* ① Centrage horizontal uniquement */ .center-h { width: 600px; margin: 0 auto; /* auto sur les marges gauche/droite */ } /* ② Centrage H + V avec Flexbox */ body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .centered-box { width: 600px; } /* ③ Alternative — positionnement absolu */ .centered-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; }