Box Model et Positionnement CSS

Apprendre à structurer son site avec CSS.

Comment trouver un développeur web en 2023. freelance

« En mode codage.« 

Au coeur du Web Design

Cette leçon plonge dans le cœur du CSS pour révéler le fonctionnement interne du Box Model et explorer les subtilités du positionnement des éléments.

Ces deux concepts nous permettrons de créer des sites avec des mises en forme complexes.

Le Box Model

Chaque élément HTML peut être envisagé comme une boîte.

Cette « boîte » englobe plusieurs couches : le contenu, le padding (marge intérieur), la bordure, et la margin (marge extérieure).

Le Box Model CSS nous permet de manipuler ces couches pour contrôler précisément le design et la mise en page.

  • Content (Contenu): Cœur de la boîte où le texte et les images résident.
  • Padding: Espace entre le contenu et sa bordure. Influence la taille de l’élément mais pas son espacement avec d’autres éléments.
  • Border (Bordure): Cerne le padding et le contenu. Visible et stylisable.
  • Margin (Marge): Espace entre la bordure de l’élément et ses voisins. Ne fait pas partie de la taille de l’élément.
Schéma d'un Box Model

Un exemple concret ?

Dans cet exemple, .box a une largeur fixe de 150px. Le padding ajoute de l’espace intérieur (en violet dans l’inspecteur de code), la bordure (visible) ajoute une délimitation visuelle, et la marge crée un espace entre cette boîte et d’autres éléments adjacents (en jaune dans l’inspecteur).

.box {
    width: 150px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}
Capture d'écran montrant le rendu de mon style css

Les Stratégies de Positionnement

Le positionnement CSS détermine comment un élément est disposé sur la page, avec ou sans influence sur la disposition des éléments adjacents.

  • Static: Valeur par défaut. L’élément suit le flux normal du document.
  • Relative: L’élément est déplacé relativement à sa position initiale sans affecter le positionnement d’autres éléments.
  • Absolute: Extrait l’élément du flux normal, le positionnant par rapport à son ancêtre positionné le plus proche.
  • Fixed: Fixe l’élément par rapport au viewport, le rendant immobile lors du défilement.
  • Sticky: Comportement hybride entre relative et fixed; l’élément « colle » à une position lors du scroll.

Ce concept est encore mal compris par beaucoup de personnes, si vous ne comprenez pas tout, pas d’inquiétude !

N’hésitez pas à vous documenter plus en profondeur et surtout à TESTER !!

Je vous propose tout de même un exemple concret:

.relative-box { position: relative; bottom: 70px; }
.absolute-box { position: absolute; bottom: 70px;}
Capture d'écran pour montrer la différence entre relative et absolute

.relative-box est décalé de 70px en partant du bas par rapport à sa position normale.

.absolute-box est positionné à 70px en partant du bas.

Le Box Model et les stratégies de positionnement sont des outils puissants.

Ils offrent une flexibilité et un contrôle total sur la disposition des éléments de page, permettant des designs complexes et réactifs.

Maîtriser ces concepts vous permettra de transformer vos visions créatives en réalités web interactives.

La suite ?

Dans la prochaine leçon, nous aborderons Flexbox et CSS Grid, des techniques modernes pour créer des layout (structures) encore plus dynamiques et adaptatifs.

FLEXBOX ET CSS GRID CSS