CSS : Introduction à la mise en page

Header :

Nous allons ici explorer les concepts de base de la mise en page CSS. La mise en page CSS est essentielle pour organiser et structurer visuellement les éléments HTML sur une page web. À la fin de ce chapitre, vous serez en mesure de :

  1. Comprendre la boîte CSS : le modèle de boîte (box model).
  2. Appliquer des marges, des bordures et des rembourrages aux éléments.
  3. Utiliser la propriété display pour contrôler le type d'affichage des éléments.
  4. Maîtriser les propriétés width et height pour dimensionner les éléments.
  5. Créer des mises en page simples en utilisant float et clear.

Body

1. Modèle de Boîte CSS (Box Model)

1.1 Qu'est-ce que le Modèle de Boîte ?

Le modèle de boîte CSS est la base de la mise en page CSS. Chaque élément HTML est considéré comme une boîte rectangulaire ayant quatre composantes principales : le contenu, le rembourrage (padding), la bordure (border), et la marge (margin).

1.2 Propriétés du Modèle de Boîte

  • Contenu (Content) : C'est la partie interne de la boîte qui contient le texte ou les éléments.
  • Rembourrage (Padding) : C'est l'espace entre le contenu et la bordure. Vous pouvez définir la taille du rembourrage avec la propriété padding.
  • Bordure (Border) : C'est la ligne autour du contenu et du rembourrage. Vous pouvez définir la taille et le style de la bordure avec la propriété border.
  • Marge (Margin) : C'est l'espace entre la bordure de l'élément et les éléments adjacents. Vous pouvez définir la taille de la marge avec la propriété margin.

2. Propriété display

La propriété display vous permet de contrôler le type d'affichage d'un élément. Les valeurs courantes de display incluent block, inline, inline-block, none, et plus encore.

  • block : Les éléments s'affichent les uns en dessous des autres, prenant toute la largeur disponible.
  • inline : Les éléments s'affichent les uns à côté des autres, en ligne.
  • inline-block : Les éléments s'affichent en ligne, mais vous pouvez définir leur largeur et leur hauteur.
  • none : L'élément n'est pas affiché du tout (utile pour masquer temporairement des éléments).

Plus d'info sur tout ceci dans la documentation sur les display ainsi que dans le cours sur les flexbox

3. Propriétés width et height

Les propriétés width et height permettent de définir la largeur et la hauteur des éléments. Vous pouvez spécifier les valeurs en pixels, en pourcentage, en em ou d'autres unités.

Exemple :

/* Définir la largeur et la hauteur d'un élément */
div {
    width: 200px;
    height: 100px;
}

4. float et clear

La propriété float permet de déplacer un élément vers la gauche ou la droite, le faisant flotter autour d'autres éléments. Cela est couramment utilisé pour créer des mises en page multi-colonnes.

La propriété clear est utilisée pour forcer un élément à ne pas flotter à gauche ou à droite d'autres éléments flottants.

Exemple :

/* Faire flotter un élément à gauche */
img {
    float: left;
}

/* Forcer un élément à ne pas flotter à gauche d'autres éléments flottants */
.clearfix {
    clear: both;
}
Tags

créé le 2023-09-01 à 11:20

Interactive Graph
Table Of Contents
CSS : Introduction à la mise en page
Header :
Body
1. Modèle de Boîte CSS (Box Model)
1.1 Qu'est-ce que le Modèle de Boîte ?
1.2 Propriétés du Modèle de Boîte
2. Propriété display
3. Propriétés width et height
4. float et clear
Footer
Tags