CSS va servir à la mise en forme visuelle d'une boîte ainsi qu'à la disposition de celle-ci dans le flux d'un document. Il existe différents types pour définir une boîte. Selon le type, le rendu visuel sera différent.
Le type de boîte va dépendre de la valeur de la propriété display. Cette propriété permet d'indiquer le mode de rendu (ou d'affichage) d'un élément HTML.
Il existe une ambiguïté entre les deux langages CSS et HTML en ce qui concerne les éléments. En HTML (jusqu'à la version 4.01[1]), les éléments sont soit de type block soit de type inline et participent à la structure du document. Même chose côté CSS sauf qu'ils agissent sur le rendu visuel. Il est possible en CSS de changer le type d'un élément HTML, mais celui-ci restera toujours du même type en HTML.
Éléments de type block
On parle d'éléments de type block lorsque la valeur de la propriété display vaut : block, list-item ou table.
On peut noter plusieurs caractéristiques concernant un élément de type block :
- Il peut contenir à la fois d'autres éléments de type block, des éléments de type inline et/ou du texte (boîte de bloc anonymes).
- On peut lui spécifier une largeur et une hauteur. Dans le cas où aucune largeur n'est définie, il prend toute la largeur de son élément parent, déclenchant ainsi un retour automatique à la ligne.
- On peut également lui spécifier une marge ainsi qu'un rembourrage.
- Chaque élément de type block s'empile l'un au-dessus de l'autre, dans l'ordre du flux HTML.
- La propriété vertical-align ne s'applique pas.
Parmi les éléments de type block, on peut noter par exemple : p, div, ol, ul, li, h1, h2...
Ci-dessous, une illustration avec un élément de type block dans lequel est inséré un élément de type inline. Aucune largeur n'est spécifiée, on constate bien que l'élément div occupe toute la place, tandis que le l'élément inline span occupe l'espace sur la ligne.
Éléments de type inline
On parle d'éléments de type inline lorsque la valeur de la propriété display vaut : inline, inline-block ou inline-table.
- Il ne peut contenir que des éléments de type inline ou du texte.
- Il n'est pas possible de définir une largeur et une hauteur explicite. Par défaut, largeur et hauteur dépendent du contenu de l'élément.
- On peut appliquer des marges à gauche et à droite de l'élément mais pas en haut ni en bas. Mais aucune restriction concernant le rembourrage.
- Il s'inscrit dans le flux du texte. Il n'y a pas un retour à la ligne comme pour un élément de type block.
- Il prend en compte la propriété vertical-align.
Parmi les éléments de type inline, on peut noter : a, span, b, em, i, cite, button, code...
L'élément a fait figure d'exception dans la mesure où il peut envelopper n'importe quel type de contenu, block comme inline ou les deux.
Éléments de type inline-block
Les éléments de type inline-block vont se comporter à la fois comme s'ils étaient de type block et de type inline, tout simplement. Il ressort de ce type de contenu deux problèmes majeurs :
- Un élément inline-block est dépendant du white-space (les espaces blancs avant et après n'importe quel élément HTML).
- L'alignement vertical sera affecté.
Ci-dessous, un exemple d'utilisation. Le premier menu est sans rendu d'affichage en CSS. Dessous, le même menu mais en utilisant le type de rendu inline-block sur les éléments li :
Quel est donc l'intérêt d'utiliser la valeur inline-block ?
On peut aisément placer plusieurs éléments de type block sur la même ligne horizontale sans avoir recours à la propriété float. Il est plus facile également de définir une hauteur et une largeur tout en conservant le type inline de l'élément. Enfin, on peut ajouter des marges et/ou des rembourrages à un élément inline block.
Les boîtes flottantes
A l'origine, la propriété float devait permettre de faire "flotter" des images à l'intérieur d'un bloc de texte, autrement dit l'idée était de retirer un élément (image) du flux normal pour laisser le texte couler autour. Or, cette propriété a été devoyée pour devenir un mode de rendu.
Mais inutile d'épiloguer sur cette mauvaise pratique, puisque révolue avec l'arrivée de nouveaux modèles de rendu (voir juste en dessous).
Ci-dessous, un exemple de bonne utilisation de la propriété float :
Voir également l'utilité de cette propriété en lisant cet article sur les formes CSS (CSS shapes).
Le modèle de contenu des tableaux (table layout)
En plus des boîtes en ligne (inline layout) et des boîtes de bloc (bloc layout), il existe le modèle de contenu pour les tableaux (table layout).
Voir en corrélation le cours sur ce blog les tableaux HTML.
Modèles de contenu modernes
Le modèle de contenu à plusieurs colonnes (Multi-column layout)
Ce modèle permet de créer des boîtes de colonne entre la boîte englobante et le contenu qui s'apparente au modèle de contenu dans le monde de l'imprimerie.
Le modèle de contenu des boîtes flexibles (flexible box layout)
Le module des boîtes flexibles (CSS Flexible Box Layout) un modèle de disposition unidimensionnel (une dimension). Autrement dit, le module va permettre de contrôler la mise en page en fonction d'une ligne ou d'une colonne, mais pas les deux en même temps.
Le modèle flexbox est une petite révolution dans la mesure où les anciens modèles de rendu permettaient seulement de gérer une seule direction. Il répond en fait aux besoins du responsive. Cela permet la création de mises en page plus adaptatives et réactives qui s'adaptent aux changements de mise en page sur différentes tailles et orientations d'écran.
Concrètement, l'idée de base est de rendre un élément flexible : les éléments à l'intérieur d'un conteneur (l'élément parent) peuvent être étirés et rétrécis afin que ceux-ci s'adapent à l'espace disponible du conteneur que ce soit horizontalement ou verticalement.
En utilisant un conteneur flexible, il est également possible d'organiser, de (ré) ordonner, aligner et de répartir l'espace entre (et / ou autour) les éléments enfants. Vous pouvez ainsi modifier l'ordre visuel des éléments à l'intérieur du conteneur sans affecter leur ordre réel dans le balisage HTML.
Tous les éléments enfants directs deviennent donc des éléments flexibles (flex items). Il est donc inutile en général de déclarer un modèle flexbox à ceux-ci. Toutefois, gardez bien en tête que le conteneur flexbox est toujours considéré comme un élément de type block (ou inline), mais dont le contenu interne, lui, est flexible.
Autrement dit, dans le flux de la page, le conteneur est considéré comme de type block. Tout ce qui se trouve en son sein est considéré comme flexible.
Pour vous rendre compte de la différence entre les deux modèles de disposition :
Tandis que les éléments de type block prennent toute la largeur disponible par défaut, les éléments enfants flexibles se contentent, quant à eux, de l'espace nécessaire selon leur contenu (ou leur largeur).
