Disposition CSS - La propriété display
La displaypropriété est la propriété CSS la plus importante pour contrôler la mise en page.
La propriété d'affichage
La displaypropriété spécifie si/comment un élément est affiché.
Chaque élément HTML a une valeur d'affichage par défaut selon le type d'élément dont il s'agit. La valeur d'affichage par défaut pour la plupart des éléments est blockou
inline.
Cliquez pour afficher le panneau
This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).
Éléments de niveau bloc
Un élément de niveau bloc commence toujours sur une nouvelle ligne et occupe toute la largeur disponible (il s'étend aussi loin que possible vers la gauche et la droite).
Exemples d'éléments de niveau bloc :
- <div>
- <h1> - <h6>
- <p>
- <forme>
- <en-tête>
- <pied de page>
- <rubrique>
Éléments en ligne
Un élément en ligne ne commence pas sur une nouvelle ligne et ne prend que la largeur nécessaire.
Il s'agit d'un élément <span> en ligne à l'intérieur d'un paragraphe.
Exemples d'éléments en ligne :
- <span>
- <a>
- <image>
Affichage : aucun ;
display: none;est couramment utilisé avec JavaScript pour masquer et afficher des éléments sans les supprimer ni les recréer. Jetez un œil à notre dernier exemple sur cette page si vous voulez savoir comment cela peut être réalisé.
L' <script>élément utilise display: none;
par défaut.
Remplacer la valeur d'affichage par défaut
Comme mentionné, chaque élément a une valeur d'affichage par défaut. Cependant, vous pouvez remplacer cela.
Changer un élément en ligne en un élément de bloc, ou vice versa, peut être utile pour donner à la page un aspect spécifique, tout en respectant les normes Web.
Un exemple courant consiste à créer des <li>éléments en ligne pour les menus horizontaux :
Exemple
li {
display: inline;
}
Remarque : La définition de la propriété display d'un élément modifie uniquement la façon dont l'élément est affiché , PAS le type d'élément dont il s'agit. Ainsi, un élément en ligne avec display: block;n'est pas autorisé à avoir d'autres éléments de bloc à l'intérieur.
L'exemple suivant affiche les éléments <span> en tant qu'éléments de bloc :
Exemple
span {
display: block;
}
L'exemple suivant affiche les éléments <a> sous forme d'éléments de bloc :
Exemple
a {
display: block;
}
Masquer un élément - display:none ou visibilité:hidden ?
display:none
visibility:hidden
Réinitialiser
Masquer un élément peut être fait en définissant la displaypropriété sur
none. L'élément sera caché et la page sera affichée comme si l'élément n'était pas là :
Exemple
h1.hidden {
display: none;
}
visibility:hidden; masque également un élément.
Cependant, l'élément occupera toujours le même espace qu'auparavant. L'élément sera masqué, mais affectera toujours la mise en page :
Exemple
h1.hidden {
visibility: hidden;
}
Plus d'exemples
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |