Nous avons examiné les bases du modèle de boîte CSS dans notre module Introduction à CSS. Cet article en est une récapitulation tout en donnant plus de détails sur le sujet.

Prérequis : Bases du HTML (étude de Introduction au HTML) et une idée dont fonctionnent les CSS (étude de Introduction aux CSS.)
Objectifs : Se remémorer les bases du modèle de boîte des CSS tout en y ajoutant quelques détails.

Propriétés des boîtes

Comme vous le savez sans doute déjà, chaque élément d'un document est structuré comme une boîte rectangulaire à l'intérieur de la mise en page du document, avec des propriétés qui peuvent être modifiées de cette façon :

  • width et height définissent largeur et hauteur de la boîte de contenu.
  • La famille des propriétés padding définit la largeur du remplissage (n'oubliez pas les formes longues de cette propriété, comme padding-bottom qui vous permet l'ajustement d'un seul côté à la fois).
  • La famille des propriétés border définit largeur, style et couleur de l'encadrement (il existe de nombreuses formes longues pour cette famille de propriétés).
  • La famille des propriétés margin définit la largeur de la zone périmétrique au-delà de l'encadrement, qui touche les autres boîtes dans la disposition générale (à nouveau, des formes longues de propriété comme margin-bottom sont disponibles).

Quelques autres points dont il est bon de se souvenir :

  • Les hauteurs de boîte n'acceptent pas une définition de leur taille en pourcentage ; la hauteur de la boîte est toujours celle du contenu de la boîte, sauf si une hauteur absolue spécifique est définie (par exemple en pixels ou ems). C'est plus pratique que si la hauteur de chaque boîte sur la page était par défaut égale à 100% de la hauteur de la vue.
  • Les encadrements ignorent aussi les paramètres de largeur exprimés en pourcentage.
  • Les marges ont un comportement spécifique appelé fusion des marges (margin collapsing) : lorsque deux boîtes se touchent, la valeur de la distance les séparant est celle de la plus grande des deux marges au contact, et non leur somme.

Note : Voir la section Propriétés des boîtes de l'article sur Le modèle de boîte pour un aperçu plus complet et un exemple.

Débordement

Lorsque vous définissez la taille d'une boîte avec des valeurs absolues (par exemple, une largeur/hauteur fixe en pixels), le contenu peut ne pas correspondre à la taille demandée, auquel cas le contenu déborde de la boîte. Pour contrôler ce qui se passe dans ce cas, nous pouvons utiliser la propriété overflow. Elle accepte plusieurs valeurs possibles, mais les plus courantes sont, dans le cas où il y a trop de contenu :

  • auto : le contenu en débord est caché et des barres de défilement sont affichées pour permettre à l'utilisateur de voir tout le contenu.
  • hidden : le contenu en débord est caché.
  • visible : le contenu en débord est affiché en dehors de la boîte (c'est généralement le comportement par défaut).

Note : Voir le paragraphe Débordement de l'article Le modèle de boîte pour un aperçu plus complet et un exemple.

Découpage des arrières‑plans

Les arrière‑plans de boîte sont constitués par des couleurs et/ou des images, empilés les uns au‑dessu des autres (background-color, background-image). Ils sont appliqués à la boîte en étant dessinés sous cette boîte. Par défaut, les arrière-plans s'étendent jusqu'au bord extérieur de l'encadrement. C'est souvent la bonne solution, mais dans certains cas, cela peut être gênant (par ex., si vous avez une image de fond à motifs répétés que vous ne voulez étendre que jusqu'au bord du contenu). Ce comportement peut être ajusté en définissant la propriété background-clip de la boîte.

Note : Voir le paragraphe Découpage du fond de l'article Le modèle de boîte pour un exemple.

Contour

Le contour (outline) d'une boîte est quelque chose qui ressemble à un encadrement, mais qui ne fait pas partie du modèle de boîte. Il se comporte comme l'encadrement, mais il est tracé sur la boîte sans en changer la taille (pour être précis, le contour est dessiné à l'extérieur de l'encadrement, dans l'espace de la marge).

Note : Méfiez-vous en utilisant la propriété outline. Elle s'utilise dans certains cas pour des raisons d'accessibilité pour mettre en évidence les parties actives d'une page Web, comme les liens lorsqu'un utilisateur clique dessus. En utilisant des contours, assurez-vous qu'ils ne ressemblent pas à des mises en évidence de liens, car les utilisateurs pourraient confondre.

Propriétés avancées des boîtes

Après ce bref récapitulatif, regardons quelques propriétés de boîte plus avancées que vous trouverez utiles.

Définition de contraintes en largeur et hauteur

Il existe d'autres propriétés permettant une gestion plus souple de la taille des boîtes de contenu — elles consistent à fixer des contraintes de taille au lieu d'une taille absolue. Ce sont les propriétés min-width, max-width, min-height et max-height.

Une utilisation évidente est de permettre une largeur de mise en page flexible en définissant la largeur de son conteneur extérieur en pourcentage, mais sans que cette largeur puisse devenir trop large ou trop étroite, car la mise en page pourrait en pâtir. Utiliser les techniques de conception adaptatives de sites Web (que nous verrons plus tard) serait une option possible, mais donner à la mise en page des contraintes de largeur maximale et minimale constitue une autre option bien plus simple :

width: 70%;
max-width: 1280px;
min-width: 480px;

Vous pouvez aussi la compléter de la ligne suivante ; elle centre dans son parent le conteneur auquel elle s'applique :

margin: 0 auto;

0 fixe la valeur des marges supérieure et inférieure à 0 ; auto (dans ce cas) partage l'espace disponible entre les marges gauche et droite du conteneur, donc le centre. Ainsi, lorsque les dimensions du conteneur se trouvent à l'intérieur des contraintes de largeur minimale et maximale, il remplit toute la largeur de la vue. Si la largeur de 1280px est dépassée, la mise en page gardera une largeur de 1280px et sera centrée à l'intérieur de l'espace disponible. Si la largeur descend en dessous de 480px, la vue devient plus petite que le conteneur et vous devrez utiliser la barre de défilement pour tout voir.

Vous pouvez voir l'exemple ci‑dessus en action dans min-max-container.html (voir le code source).

Une autre bonne utilisation de max-width est de garder les médias (par ex.  images et vidéos) dans un conteneur. En revenant à l'exemple ci-dessus, l'image pose problème — tout est bien, mais quand le conteneur devient plus étroit que l'image, l'image va déborder du conteneur (car elle a une largeur fixe). Pour résoudre ce problème, nous pouvons définir pour l'image les déclarations suivantes :

display: block;
margin: 0 auto;
max-width: 100%;

Les deux premières directives font que l'image va se comporter comme un élément bloc centré à l'intérieur du conteneur parent. Mais la vraie magie est dans la troisième. Régler la largeur maximale de l'image à 100% va la contraindre à occuper toute la largeur du conteneur. Par conséquent, si le conteneur rétrécit et devient plus petit que la largeur de l'image, l'image rétrécira avec lui.

Voyez l'exemple modifié min-max-image-container.html (voir le code source).

Note : Cette technique fonctionne depuis Internet Explorer 7, elle est donc « navigateur croisée ».

Modification totale du modèle de boîte

La largeur totale d'une boîte est la somme des valeurs des propriétés width, padding-right, padding-left, border-right et border-left. Dans certains cas, c'est ennuyeux (par exemple, que se passe-t-il si vous voulez avoir une boîte de 50% de largeur totale avec encadrement et remplissage exprimés en pixels ? Pour éviter de tels problèmes, il est possible d'ajuster le modèle de boîte avec la propriété box-sizing. Avec la valeur border-box, le modèle de boîte change et devient celui‑ci :

 

Voyons un exemple en direct. Nous allons mettre en place deux éléments <div> identiques avec la même largeur, le même encadrement et le même remplissage. Nous utiliserons également du JavaScript pour afficher la valeur calculée (valeur finale à l'écran en pixels) de la largeur de chaque boîte. La seule différence est que nous avons défini box-sizing: border-box pour la boîte du bas, mais nous avons laissé le comportement par défaut à la boîte du haut.

Tout d'abord, le HTML :

<div class="one"></div>
<div class="two"></div>

Maintenant la CSS:

html {
  font-family: sans-serif;
  background: #ccc;
}

.one, .two {
  background: red;
  width: 330px;
  height: 150px;
  padding: 20px;
  border: 10px solid black;
  margin: 20px auto;
}

.two {
  box-sizing: border-box;
}

Enfin, un peu de JavaScript pour mesurer les largeurs hors tout :

var one = document.querySelector('.one');
var two = document.querySelector('.two');

function outputWH(box) {
  var width = box.offsetWidth;
  var height = box.offsetHeight;
  box.textContent = 'Largeur : ' + width + 'px, Hauteur : ' + height + 'px.';
}

outputWH(one);
outputWH(two);

Et voici le résultat :

Que s'est‑il passé ? La largeur et la hauteur de la première boîte sont égales à contenu + remplissage + encadrement, comme nous pouvons nous y attendre. La seconde boîte néanmoins a ses largeur et hauteur égales aux largeur et hauteur définies pour le contenu dans la CSS. Le remplissage et l'encadrement n'ont pas été ajoutés aux largeur et hauteur totales ; au lieu de cela, le remplissage et l'encadrement ont pris un peu de l'espace du contenu en le rapetissant et en conservant sa dimension totale inchangée.

Voyez ce même exemple en direct avec box-sizing-example.html (voir le code source).

Types d'affichage des boîtes

Tout ce que nous avons dit jusqu'à présent s'applique aux boîtes qui représentent des éléments de niveau bloc. Cependant, les CSS ont d'autres types de boîtes se comportant différemment. Le type de boîte appliquée à un élément est défini par la propriété display.

Types « display » courants

Il y a de nombreuses valeurs acceptées pas la propriété display, les trois plus courantes sont block, inline et inline-block.

  • Une boîte de type block est une boîte empilée sur d'autres boîtes (c.-à-d. le contenu avant et après la boîte apparaît sur une ligne séparée), et peut avoir la largeur et la hauteur définies sur elle. Le modèle de boîte entière, tel que décrit ci-dessus, s'applique aux boîtes block.
  • Une boîte de type inline est le contraire d'une boîte block : elle s'intègre dans le cours du texte du document (c'est-à-dire qu'elle apparaîtra sur la même ligne que le texte environnant et d'autres éléments en ligne, et son contenu sera coupé dans le cours du texte, comme des lignes de texte dans un paragraphe). Les réglages de largeur et de hauteur n'ont aucun effet sur les boîtes inline ; tout remplissage, marge et encadrement de boîtes en ligne modifie la position du texte environnant, mais n'affecte pas la position des boîtes block environnantes.
  • Une boîte de type inline-block est intermédiaire entre les deux précédentes : elle s'intègre dans le texte environnant et les autres éléments en ligne sans créer de sauts de ligne avant et après elle comme une boîte inline, mais elle peut être dimensionnée avec width et height. Elle garde sa forme rectangulaire de bloc comme une boîte de type block. Elle ne sera pas cassée dans les lignes du paragraphe ( une boîte inline-block qui déborde d'une ligne de texte descendra sur une 2ème ligne de texte s'il n'y a pas assez d'espace sur la première ligne, mais elle ne se cassera pas sur deux lignes).

Par défaut, les éléments de niveau bloc sont définis display: block; et les éléments en ligne sont du type display: inline;.

Note : Voir le paragraphe Types de boîtes dans les CSS dans l'article Le modèle de boîte pour un aperçu plus complet et un exemple.

Types « display » non classiques

Il y a aussi des valeurs moins couramment utilisées pour la propriété display ; vous les rencontrerez lors de vos navigations. Certaines d'entre elles existent depuis un certain temps et sont assez bien prises en charge, tandis que d'autres sont plus récentes et moins bien prises en charge. Ces valeurs ont généralement été créées pour faciliter la création de mises en page Web ou d'applications. Les plus intéressantes sont :

  • display: table — permet d'émuler une mise en page de tableaux à l'aide d'éléments non tables, sans utiliser les éléments HTML table pour le faire. Pour en savoir plus à ce sujet, voir les Tables CSS.
  • display: flex — permet de résoudre de nombreux problèmes de mise en page classiques qui affectent les CSS depuis longtemps, tels que la disposition d'une série de conteneurs en colonnes flexibles de même largeur ou le centrage vertical du contenu. Pour plus d'informations, voir Flexbox.
  • display: grid — donne aux CSS un moyen natif d'implémenter facilement des systèmes de grilles, alors que les grilles traditionnelles sont quelque peu « hackées ». L'article sur les Grilles CSS explique comment utiliser les grilles CSS traditionnelles et donne un aperçu des grilles CSS natives.

Et la suite ?

Dans ce petit récapitulatif rapide, nous avons examiné quelques fonctions plus avancées de CSS pour manipuler les boîtes et avons fini par toucher à certaines fonctions avancées de mise en page. Maintenant que tout cela est derrière nous, nous allons passer aux arrière-plans.

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab
Dernière mise à jour par : Dralyab,