Le modèle des boites

Dans cette nouvelle leçon, nous allons présenter le fameux « modèle des boites » CSS. Comprendre le concept de « boites » va être essentiel construire des designs de pages efficaces puisque cela va nous permettre d’appréhender la façon dont vont être calculées les dimensions de chaque élément.

 

Le concept de « boites » et le modèle des boites

L’idée centrale du modèle des boites est que tout élément HTML peut être représenté par un empilement de différentes boites rectangulaires :

• La première boite, centrale, va être composée du contenu de l’élément en soi ;
• La deuxième boite va être composée de la première boite ainsi que des marges internes de l’élément ;
• La troisième boîte va être composée de la deuxième boite et des bordures de l’élément ;
• La quatrième boite va être composée de la troisième boite et des marges externes de l’élément.

Voici la représentation d’un élément selon le modèle des boites :

 

Les propriétés CSS liées aux différentes boites

Le CSS va déjà nous fournir différentes propriétés qui vont nous permettre de spécifier la taille des différents éléments composants les différentes boites :

• Les propriétés width et height vont nous permettre de définir la largeur et la hauteur de la boite « contenu » ;
• La propriété padding va nous permettre de définir la taille des marges internes ;
• La propriété border va nous permettre de définir des bordures pour notre élément ;
• La propriété margin va nous permettre de définir la taille des marges externes.

Nous allons dans cette partie commencer avec l’étude de ces différentes propriétés qui sont fondamentales. Nous parlerons également de la propriété box-sizing qui va nous permettre de changer la façon dont la largeur et la hauteur d’un élément vont être calculées et donc de modifier le modèle des boites par défaut.

 

Le modèle des boites et le positionnement

Comprendre comment est calculée la taille de chaque élément et de quoi chaque élément est composé est essentiel pour créer des mises en page efficaces.

Pour choisir le type d’affichage et de positionnement des éléments HTML, le CSS va nous fournir des propriétés très puissantes qui vont nous permettre de modifier le flux normal de la page, c’est-à-dire de modifier l’ordre d’affichage des éléments ou la place réservée par défaut à chacun d’entre eux.

Ici, nous allons nous intéresser aux propriétés suivantes :

• La propriété display qui va nous permettre de définir un type d’affichage pour un élément ;
• La propriété position qui va nous permettre de positionner nos éléments de différentes façons dans une page ;
• La propriété float qui va nous permettre de faire « flotter » des éléments HTML dans la page.