CSS La propriété d'affichage
La propriété d'affichage CSS
La display est une propriété CSS importante pour contrôler la mise en page. Elle spécifie si un élément HTML est traité comme un élément de bloc ou un élément en ligne.
Chaque élément HTML a une valeur d'affichage par défaut, selon son type. La valeur d'affichage par défaut pour la plupart des éléments est block ou inline .
La display est utilisée pour modifier le comportement d'affichage par défaut des éléments HTML.
Éléments de niveau bloc
Un élément de niveau bloc commence TOUJOURS sur une nouvelle ligne et occupe toute la largeur disponible (s'étend à gauche et à droite autant qu'il le peut).
Exemples d'éléments de niveau bloc :
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Éléments en ligne
Un élément en ligne NE commence PAS sur une nouvelle ligne et n'occupe que la largeur nécessaire.
Ceci est un élément en ligne <span> à l'intérieur d'un paragraphe.
Exemples d'éléments en ligne :
- <span>
- <a>
- <img>
Valeurs d'affichage courantes
La propriété CSS display a de nombreuses valeurs. Le tableau suivant répertorie les plus couramment utilisées :
| Valeur | Description |
|---|---|
| inline | Affiche un élément comme un élément en ligne |
| block | Affiche un élément comme un élément de bloc |
| contents | Fait disparaître le conteneur, rendant ses éléments enfants enfants de l'élément du niveau supérieur dans le DOM |
| flex | Affiche un élément comme un conteneur flex de niveau bloc |
| grid | Affiche un élément comme un conteneur de grille de niveau bloc |
| inline-block | Affiche un élément comme un conteneur de bloc de niveau en ligne. L'élément lui-même est formaté comme un élément en ligne, mais vous pouvez appliquer des valeurs de hauteur, de largeur, de remplissage et de marge |
| none | L'élément est complètement caché du flux du document (n'occupe aucun espace). |
CSS display: none;
Lors de l'utilisation de display: none; , l'élément est complètement caché du flux du document et n'occupe aucun espace.
Il est couramment utilisé avec JavaScript pour cacher ou montrer des éléments sans les supprimer et les recréer.
Cliquez pour afficher le panneau caché
Exemple
Comment utiliser CSS et JavaScript pour afficher un élément caché lors d'un événement de clic :
<style>
#panel {
display: none;
}
</style>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script> Exemple
Comment utiliser CSS et JavaScript pour basculer entre afficher et cacher lors d'un événement de clic :
<style>
#panel {
display: none;
}
</style>
<script>
function myFunction() {
var x = document.getElementById("panel");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script> Remplacer la valeur d'affichage par défaut
La display est utilisée pour changer le comportement d'affichage par défaut des éléments HTML.
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 du web.
Un exemple courant est de changer les éléments <li> en ligne pour créer un menu horizontal :
Exemple
li {
display: inline;
} Remarque : Définir la propriété d'affichage d'un élément ne change que comment l'élément est affiché , PAS quel type d'élément il est. 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> comme des éléments de bloc :
Exemple
span {
display: block;
} L'exemple suivant affiche les éléments <a> comme des éléments de bloc :
Exemple
a {
display: block;
} Exemple de valeurs d'affichage supplémentaires
L'exemple suivant démontre quelques valeurs d'affichage supplémentaires :
Exemple
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
p.ex5 {display: flex;}
p.ex6 {display: grid;} Cacher un élément - Utiliser display:none ou visibility:hidden ?
display:none
visibility:hidden
Réinitialiser
Cacher un élément peut se faire en définissant la propriété display à 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;
} Vous pouvez également utiliser visibility:hidden; pour cacher un élément.
Cependant, avec cette propriété, l'élément sera caché, mais il occupera toujours le même espace que s'il était visible :
Exemple
h1.hidden {
visibility: hidden;
} Propriétés d'affichage/visibilité CSS
| Propriété | Description |
|---|---|
| display | Spécifie comment un élément doit être affiché |
| visibility | Spécifie si un élément doit être visible ou non |