Affichage CSS (Affichage)

L'attribut display spécifie le type de boîte générée par l'élément, les valeurs correspondantes couramment utilisées pour display sont block, none, inline.

L'attribut d'affichage CSS

La norme CSS définit la valeur par défaut d'affichage de tous les éléments, par exemple, l'élément <div> est présenté comme un bloc, tandis que l'élément <span> est affiché en mode intégré.

Modifier la valeur par défaut de l'affichage

Le fait de couvrir la valeur par défaut de l'élément est une importante signification de l'attribut display. Par exemple, passer d'un élément en ligne de niveau à un élément de niveau de bloc, ou passer d'un élément de niveau de bloc à un élément en ligne de niveau.

La partie suivante décrit les valeurs d'affichage CSS les plus courantes.

Affichage en bloc (Block)

La valeur block de l'attribut display force le comportement de l'élément à être similaire àblocélément, par exemple<div>ou<p>élément. Les règles de style dans les exemples suivants :<span>et <a>L'élément est affiché comme un élément en bloc :

span　{
　　　　display:　block;
}
a　{
　　　　display:　block;
}

Affichage en ligne (inline)

La valeur inline de l'attribut display rend l'élément semblable au comportement deinline-levelélément, par exemple<span>ou<a>élément. Les règles de style dans les exemples suivants :<p>et <li>L'élément est affiché comme un élément en ligne de niveau :

p　{
　　　　display:　inline;
}
ul　li　{
　　　　display:　inline;
}

Affichage en ligne en bloc (inline-block)

inline de l'attribut display-La valeur block crée une boîte pour l'élément, cette boîte se déplace avec le contenu environnant, c'est-à-dire qu'elle est sur la même ligne que le contenu adjacent. Les règles de style suivantes :<div>et <span>L'élément est affiché comme un élément en ligne en bloc :

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

Ne pas afficher (none)

Lorsque la valeur de l'attribut display est none, l'élément ne génère pas de boîte et n'est pas affiché sur la page. Les éléments enfants ne génèrent pas non plus de boîte, même s'ils définissent leur attribut display en dehors. Le document présenté semble que l'élément n'existe pas dans l'arbre du document.

h1　{
　　　　display:　none;
}
p　{
　　　　display:　none;
}