Aller au contenu principal

📚 Modèle de boîte et positionnement

Le modèle de boîte (Box Model)​

Concept de base​

Chaque élément HTML est représenté comme une boîte rectangulaire composée de 4 zones:

img

Les 4 composantes du modèle de boîte​

Content (Contenu)​

  • Zone où apparaissent le texte, les images, etc.
  • Contrôlée par width et height
  • max-width limite la largeur maximale (utile pour le design adaptatif)
.element {
    width: 300px;        /* Largeur fixe */
    max-width: 100%;     /* Ne dépassera jamais 100% du parent */
    height: 200px;       /* Hauteur fixe */
}

Padding (Espacement interne)​

  • Espace entre le contenu et la bordure
  • Toujours transparent
  • Propriétés: padding-top, padding-right, padding-bottom, padding-left
.element {
    padding: 10px;                   /* Tous les côtés */
    padding: 10px 20px;              /* Vertical | Horizontal */
    padding: 10px 20px 15px 25px;    /* Top | Right | Bottom | Left */
}

Border (Bordure)​

  • Entoure le padding et le contenu
  • Visible par défaut
  • Propriétés: border-width, border-style, border-color
.element {
    border: 2px solid #333;        /* width style color */
    border-top: 1px dashed red;      /* Bordure spécifique */
    border-radius: 5px;              /* Coins arrondis */
}

Border-radius: Arrondit les coins de la bordure

.element {
    border-radius: 10px;             /* Tous les coins */
    border-radius: 50%;              /* Cercle parfait */
    border-radius: 10px 20px;        /* Top-left/bottom-right | Top-right/bottom-left */
}

Margin (Marge externe)​

  • Espace autour de l'élément
  • Toujours transparent
  • Peut avoir des valeurs négatives
.element {
    margin: 20px;                    /* Tous les côtés */
    margin: 10px auto;               /* Centrage horizontal */
    margin-bottom: -10px;            /* Valeur négative */
}

La propriété display​

display: block​

  • Prend toute la largeur disponible
  • Commence sur une nouvelle ligne
  • Accepte width, height, margin, padding
.block-element {
    display: block;
    width: 50%;        /* Fonctionne */
    height: 100px;     /* Fonctionne */
}
info

Exemples d'éléments block: div, p, h1-h6, section, article

display: inline​

  • Prend seulement l'espace nécessaire
  • Reste sur la même ligne
  • N'accepte PAS width, height, margin vertical (mais ok pour horizontal)
.inline-element {
    display: inline;
    width: 200px;          /* IGNORÉ */
    height: 50px;          /* IGNORÉ */
    margin: 10px 20px;     /* Seul le margin horizontal fonctionne */
    padding: 10px;         /* Padding fonctionne mais peut créer des chevauchements */
}
info

Exemples d'éléments inline: span, a, strong, em, img

display: inline-block​

  • Combine les avantages des deux
  • Reste sur la même ligne MAIS accepte width/height
.inline-block-element {
    display: inline-block;
    width: 200px;          /* Fonctionne */
    height: 50px;          /* Fonctionne */
    margin: 10px;          /* Fonctionne complètement */
}

Exemples du comportement des propriétés display​

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Comportements Display</h2>

<h3>Block</h3>
<div class="block-demo">Élément 1</div>
<div class="block-demo">Élément 2</div>

<h3>Inline</h3>
<span class="inline-demo">Élément 1</span>
<span class="inline-demo">Élément 2</span>
<span class="inline-demo">Élément 3</span>

<h3>Inline-block</h3>
<div class="inline-block-demo">Élément 1</div>
<div class="inline-block-demo">Élément 2</div>
<div class="inline-block-demo">Élément 3</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

display: none et visibility: hidden​

  • Élément complètement retiré du contenu
  • Comme s'il n'existait pas
.hidden {
    display: none;         /* Invisible ET ne prend pas d'espace */
}

/* Comparaison avec visibility */
.invisible {
    visibility: hidden;    /* Invisible MAIS prend encore son espace */
}

Exemples de display: none vs visibility: hidden​

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Display none vs Visibility hidden</h2>

<h3>Avec display: none</h3>
<div class="box">Élément 1</div>
<div class="box display-none">Élément 2 - Display none</div>
<div class="box">Élément 3</div>

<h3>Avec visibility: hidden</h3>
<div class="box">Élément 1</div>
<div class="box visibility-hidden">Élément 2 - Visibility hidden</div>
<div class="box">Élément 3</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Le positionnement (position)​

position: static (par défaut)​

  • Position normale dans le flux du document
  • Les propriétés top, right, bottom, left sont ignorées
.static-element {
    position: static;      /* Valeur par défaut */
    top: 50px;            /* IGNORÉ */
}

position: relative​

  • Positionné par rapport à sa position normale
  • L'espace original est conservé dans le flux
.relative-element {
    position: relative;
    top: 20px;            /* Décalage de 20px vers le bas */
    left: 30px;           /* Décalage de 30px vers la droite */
}

Usage typique: Créer un contexte de positionnement pour des éléments position: absolute

position: absolute​

  • Positionné par rapport au premier parent relative (display: relative)
  • Retiré du flux normal (ne prend plus d'espace)
.parent {
    position: relative;    /* Crée le contexte */
}

.absolute-element {
    position: absolute;
    top: 0;               /* 0px du haut du parent */
    right: 0;             /* 0px de la droite du parent */
}

position: fixed​

  • Positionné par rapport à la fenêtre du navigateur
  • Reste en place lors du scroll
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 1000;
}

position: sticky​

  • Hybride entre relative et fixed
  • "Colle" quand l'utilisateur scroll
.sticky-nav {
    position: sticky;
    top: 20px;            /* Distance du haut avant de "coller" */
}

Note: Nécessite un parent avec une hauteur définie

Exemples des types de positionnement​

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Types de positionnement</h2>

<div class="container">
<div class="static">Static (défaut)</div>
<div class="relative">Relative (décalé de 20px vers la droite et 30px à partir du haut)</div>
<div class="absolute">Absolute (coin supérieur droit)</div>
</div>

<div class="fixed">Fixed (coin inférieur droit)</div>

<div class="sticky-container">
<div class="sticky">Sticky (scroll pour voir l'effet)</div>
<div class="content">
  <p>Contenu long pour permettre le scroll...</p>
  <p>Lorem ipsum dolor sit amet consectetur.</p>
  <p>Encore du contenu...</p>
  <p>Et encore plus de contenu...</p>
  <p>Pour créer un scroll...</p>
  <p>Et voir l'effet sticky...</p>
  <p>Continuez à scroller...</p>
  <p>L'élément sticky reste en place...</p>
</div>
</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

z-index et empilement​

Concept​

La propriété z-index contrôle l'ordre d'empilement des éléments (quel élément apparaît au-dessus).

Règles importantes​

  1. Fonctionne seulement avec position autre que static
  2. Plus la valeur est élevée, plus l'élément est au-dessus
  3. Valeurs négatives possibles
.background {
    position: absolute;
    z-index: 1;
}

.content {
    position: relative;
    z-index: 10;          /* Au-dessus de background */
}

.modal {
    position: fixed;
    z-index: 1000;        /* Au-dessus de tout */
}

Exemples de z-index​

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Z-index et empilement</h2>

<div class="demo-container">
<div class="box box1">Z-index: 1</div>
<div class="box box2">Z-index: 10</div>
<div class="box box3">Z-index: 5</div>
</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Propriété overflow et débordement​

overflow: visible (par défaut)​

Le contenu déborde de son conteneur s'il est plus grand que le conteneur.

.container {
    width: 200px;
    height: 100px;
    overflow: visible;    /* Contenu visible même s'il dépasse */
}

overflow: hidden​

Le contenu qui dépasse est coupé et non visible.

.container {
    overflow: hidden;     /* Contenu coupé, pas de scroll */
}

overflow: scroll​

Ajoute toujours des barres de défilement.

.container {
    overflow: scroll;     /* Barres de scroll toujours présentes */
}

overflow: auto​

Ajoute des barres de défilement seulement si nécessaire.

.container {
    overflow: auto;       /* Barres de scroll si contenu dépasse */
}

overflow-x et overflow-y: contrôle par axe​

Les propriétés overflow-x et overflow-y contrôlent le dépassement par axe.

.container {
    overflow-x: hidden;   /* Horizontal caché */
    overflow-y: auto;     /* Vertical automatique (barre de défilement si nécessaire) */
}

Exemples des propriétés overflow​

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Propriétés Overflow</h2>

<h3>Visible (défaut)</h3>
<div class="container visible">
<div class="content">Ce contenu dépasse largement de son conteneur.</div>
</div>

<h3>Hidden</h3>
<div class="container hidden">
<div class="content">Ce contenu dépasse mais est coupé.</div>
</div>

<h3>Scroll</h3>
<div class="container scroll">
<div class="content">Ce contenu a des barres de scroll.</div>
</div>

<h3>Auto</h3>
<div class="container auto">
<div class="content">Ce contenu montre des barres de scroll seulement si nécessaire.</div>
</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

float (historique, rarement utilisé de nos jours)​

info

Float était utilisé pour les layouts avant Flexbox/Grid, concepts que nous verrons prochainement. Aujourd'hui, on l'utilise beaucoup moins.

float: left, float: right, float: none​

.element {
    float: left;          /* Flotte à gauche */
    float: right;         /* Flotte à droite */
    float: none;          /* Pas de flottement (défaut) */
}

float: clear​

Pour empêcher les éléments de flotter autour

.clear-both {
    clear: both;          /* Empêche le flottement des deux côtés */
}