manuel de référence CSS

règles CSS @

大全 des propriétés CSS

CSS empty-propriété cells Propriété direction de CSS

Méthode d'utilisation et exemple de l'attribut CSS display

L'attribut CSS display spécifie le type de boîte générée par l'élément.

Le tableau suivant décrit l'utilisation et l'historique des versions de cet attribut, ainsi que la syntaxe d'utilisation de cet attribut dans les scripts JavaScript.

Valeur par défaut :	inline
Applicable à :	Tous les éléments
Héritage :	Non
Animable :	Non.Voir également Animation properties.
Version :	CSS 1,2,3
JavaScript Syntaxe :	object.style.display="block"

Instructions d'utilisation

La valeur calculée de l'attribut display peut être différente de celle de l'élément racine etflottantouÉlément de positionnement absoludifférentes.
Si la valeur de l'attribut display est réglée sur none, cet élément ne génère pas de boîte et n'a aucun effet sur le布局；l'élément et son contenu sont complètement supprimés de la structure de format et le document est présenté comme si cet élément n'existe pas dans l'arbre du document.

Syntaxe d'utilisation affichée

La syntaxe de cet attribut est la suivante :

display:　inline　|　block　|　contents　|　flex　|　flow　|　flow-root　|　grid　|　inline-block　|　inline-flex　|　inline-grid　|　inline-table　|　list-item　|　run-in　|　table　|　table-caption　|　table-column-group　|　table-header-group　|　table-footer-group　|　table-row-group　|　table-cell　|　table-column　|　table-row　|　none　|　initial　|　inherit

L'exemple suivant montre comment utiliser l'attribut display.

Exemple

　　div　{
　　　display:　inline;
　　}
　　span　{
　　　display:　block;
　　}

Voyons si ça fonctionne‹/›

Valeur de l'attribut

Le tableau suivant décrit la valeur de cet attribut.

valeur	description
inline	L'élément génère unniveau en lignecadre.
block	L'élément génère unbloccadre.
contents	L'élément lui-même ne génère pas de cadre, mais ses élémentsélémentetélément pseudoGénère un cadre et le texte fonctionne normalement.
flex	L'élément génère un bloc de niveau bloc.conteneur box de déformation.
flow	L'élément utilise le layout de flux (layout de bloc et de ligne) pour le contenu.
flow-root	L'élément génère un conteneur de bloc et utilise le layout de flux pour le contenu.
grid	L'élément génère un conteneur de grille de niveau bloc.
inline-block	L'élément génère un bloc, le layout de ce bloc est comme s'il s'agissait d'un conteneur intégré.
inline-flex	L'élément génère un conteneur de flexibilité de niveau en ligne.
inline-grid	L'élément génère un conteneur de grille de niveau en ligne.
inline-table	L'élément se comporte comme une table, comme un élément en ligne.
list-item	L'élément génère un bloc pour le contenu et un élément en ligne séparé pour les balises de liste.
run-in	Cet élément génère un bloc ou un élément en ligne en fonction du contexte.
table	Le comportement de cet élément est similaire à<table>élément HTML.
table-caption	Le comportement de cet élément est similaire à<caption>élément HTML.
table-column-group	Le comportement de cet élément est similaire à<colgroup>élément HTML.
table-header-group	Le comportement de cet élément est similaire à<thead>élément HTML.
table-footer-group	Le comportement de cet élément est similaire à<tfoot>élément HTML.
table-row-group	Le comportement de cet élément est similaire à<tbody>élément HTML.
table-cell	Le comportement de cet élément est similaire à<td>élément HTML.
table-column	Le comportement de cet élément est similaire à<col>élément HTML.
table-row	Le comportement de cet élément est similaire à<tr>élément HTML.
none	Fermer l'affichage de l'élément. Même si toutes les propriétés d'affichage des éléments enfants sont définies sur none, l'affichage sera fermé.
initial	Définir cette propriété à sa valeur par défaut.
inherit	Si spécifié, l'élément lié utilise la valeur de la propriété display de son élément parent.

Compatibilité du navigateur

Compatibilité des navigateurs pour la propriété display, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 7+

Avertissement :valeur, par exemple contents, flow-root, run-in et autres ne sont pas bien supportés dans la plupart des navigateurs. Il est préférable de les éviter temporairement.

Pour en savoir plus

Veuillez consulter les tutoriels suivants :Affichage CSS.

propriétés associées :visibility,float,position.

CSS empty-propriété cells Propriété direction de CSS