Exercice 2.1 - Box Model

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid #333;
    margin: 15px;
}

Question 1

Avec box-sizing: content-box, quelle est la largeur totale visible de .box ?

Largeur totale = width + padding gauche/droite + border gauche/droite = 300 + 20 + 20 + 5 + 5 = 350px

Question 2

Avec box-sizing: border-box, quelle est la largeur totale visible ?

La largeur totale reste 300px. Le padding et la border sont inclus dans la width, donc le contenu réel sera réduit.

Question 3

Écrivez le reset CSS universel pour box-sizing :

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

Exercice 2.2 - Centrer un élément

Centrez horizontalement un élément <div> de 600px de large, puis centrez-le aussi verticalement dans la page.

Centrage horizontal

div {
    width: 600px;
    margin: 0 auto;
}

Centrage horizontal et vertical

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

div {
    width: 600px;
}