Chaque élément d'une page Web est une boîte rectangulaire. La propriété d'affichage en CSS détermine le comportement de cette boîte rectangulaire. Seules quelques valeurs sont couramment utilisées:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
La valeur par défaut de tous les éléments est en ligne. La plupart des «feuilles de style de l'agent utilisateur» (les styles par défaut que le navigateur applique à tous les sites) réinitialisent de nombreux éléments à «bloquer». Passons en revue chacun de ces éléments, puis couvrons certaines des autres valeurs moins courantes.
En ligne
La valeur par défaut des éléments. Pensez à des éléments tels que , ou et comment l'habillage de texte dans ces éléments dans une chaîne de texte ne rompt pas le flux du texte.
L' élément a une bordure rouge de 1 px. Remarquez qu'il s'inscrit parfaitement dans le reste du texte.
Un élément en ligne acceptera la marge et le remplissage, mais l'élément reste en ligne comme vous pouvez vous y attendre. La marge et le remplissage ne repousseront les autres éléments que horizontalement, pas verticalement.
Un élément en ligne n'acceptera pas heightet width. Il l'ignorera simplement.
Bloc en ligne
Un élément défini sur inline-blockest très similaire à inline en ce sens qu'il sera mis en ligne avec le flux naturel du texte (sur la «ligne de base»). La différence est que vous pouvez définir un widthet heightqui sera respecté.
Bloquer
Un certain nombre d'éléments sont définis blockpar la feuille de style UA du navigateur. Ils sont généralement des éléments de conteneurs, comme , et
. Texte également "blocs" comme
et
. Les éléments de niveau bloc ne sont pas alignés mais dépassent. Par défaut (sans définir de largeur), ils occupent autant d'espace horizontal que possible.
Les deux éléments avec les bordures rouges sont
s qui sont des éléments de niveau bloc. L' élément entre eux ne reste pas en ligne car les blocs se décomposent sous les éléments en ligne.
Rodage
Premièrement, cette propriété ne fonctionne pas dans Firefox. Le mot est que les spécifications ne sont pas assez bien définies. Pour commencer à le comprendre, c'est comme si vous vouliez qu'un élément d'en-tête soit aligné avec le texte en dessous. Le faire flotter ne fonctionnera pas et rien d'autre non plus, car vous ne voulez pas que l'en-tête soit un enfant de l'élément de texte en dessous, vous voulez qu'il soit son propre élément indépendant. Dans les navigateurs «compatibles», c'est comme ceci:
Ne comptez pas dessus, cependant.
Flexbox
La displaypropriété est également utilisée pour les nouvelles méthodes de mise en page fangled comme Flexbox.
.header ( display: flex; )
Il existe des versions plus anciennes de la syntaxe flexbox, veuillez donc consulter cet article pour connaître la syntaxe d'utilisation de flexbox avec le meilleur support de navigateur. Assurez-vous de consulter ce guide complet de Flexbox.
Flow-Root
La flow-rootvaleur d'affichage crée un nouveau «contexte de formatage de bloc», mais est autrement similaire block. Un nouveau BFC aide à nettoyer les flotteurs, en supprimant le besoin de hacks pour le faire.
.group ( display: flow-root; )
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
Chrome
Firefox
C'EST À DIRE
Bord
Safari
58
53
Non
79
13
Mobile / tablette
Chrome Android
Android Firefox
Android
Safari sur iOS
88
85
81
13,0-13,1
Grille
La disposition de la grille sera également définie initialement par la propriété d'affichage.
body ( display: grid; )
Voici notre guide sur la disposition en grille, qui comprend un tableau de prise en charge du navigateur.
Aucun
Supprime entièrement l'élément de la page. Notez que tant que l'élément est toujours dans le DOM, il est supprimé visuellement et de toute autre manière imaginable (vous ne pouvez pas tabuler vers lui ou ses enfants, il est ignoré par les lecteurs d'écran, etc.).
Valeurs de table
Il existe tout un ensemble de valeurs d'affichage qui obligent les éléments non-table à se comporter comme des éléments de table, si vous en avez besoin. C'est rare, mais cela vous permet parfois d'être «plus sémantique» avec votre code tout en utilisant les pouvoirs de positionnement uniques des tables.
