Exercice 2 : Box Model

2.1 Comprendre le Box Model

1. Avec box-sizing: content-box (défaut)
   Largeur totale visible :40px (padding) + 10px (border)+ 15px (margin)+ 300px (contenu) + 40px (padding) + 10px (border)+ 15px(margin) = 380px
   
2. Avec box-sizing: border-box
   Largeur totale visible : 300px (inclut padding et border)
3. Reset CSS universel pour box-sizing
   *,
*::before,
*::after {
box-sizing: border-box;
}

2.2 Centrer un élément

• Centrer horizontalement et verticalement un élément <div> de 600px de large :

Code CSS utilisé :

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

.div {
    width: 600px;
    background-color: red;
}