L' display propriété est la propriété CSS le plus important pour le contrôle de la mise en page.
La propriété d'affichage
L' display propriété spécifie si / comment un élément est affiché.
Chaque élément HTML a une valeur d'affichage par défaut en fonction de ce type d'élément il est. La valeur d'affichage par défaut pour la plupart des éléments est block ou en inline .
Cliquez pour afficher le panneau
Ce panneau contient un <div> élément, qui est masqué par défaut ( display: none ).
Il est de style avec CSS, et nous utilisons JavaScript afin de montrer (changer pour ( display: block ).
Éléments de niveau bloc
Un élément de niveau bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (étend à gauche et à droite aussi loin que possible).
Des exemples d'éléments de niveau bloc:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Inline Elements
Un élément en ligne ne démarre pas sur une nouvelle ligne et ne prend autant de largeur que nécessaire.
Ceci est une ligne <span> élément à l' intérieur d' un paragraphe.
Des exemples d'éléments en ligne:
- <span>
- <a>
- <img>
Display: none;
display: none; est couramment utilisé avec JavaScript pour cacher et montrer des éléments sans supprimer et les recréer. Jetez un oeil à notre dernier exemple sur cette page si vous voulez savoir comment cela peut être réalisé.
Le <script> élément utiliser display: none; comme sa valeur par défaut.
Remplacer la valeur par défaut d'affichage
Comme mentionné précédemment, chaque élément a une valeur d'affichage par défaut. Cependant, vous pouvez remplacer cela.
Modification d'un élément en ligne à un élément de bloc, ou vice versa, peut être utile pour faire la page regarder d'une manière spécifique, et encore suivre les standards du Web.
Un exemple courant est fait en ligne <li> éléments pour des menus horizontaux:
 | Remarque: Réglage de la propriété d'affichage d'un élément ne change la façon dont l'élément est affiché, pas ce type d'élément il est.Ainsi, un élément en ligne avec display: block; est pas permis d'avoir d' autres éléments de bloc à l' intérieur. |
|---|
L'exemple suivant affiche <span> éléments comme éléments de bloc:
Cacher un élément - display:none ou visibility:hidden ?
Hiding un élément peut être fait en mettant l' display des biens à none . L'élément sera caché, et la page sera affiché comme si l'élément est pas là:
visibility:hidden; cache aussi un élément.
Cependant, l'élément sera toujours prendre le même espace qu'auparavant. L'élément sera caché, mais affecte encore la mise en page:
Autres exemples
display: none; contre visibility: hidden;
Cet exemple démontre display: none; contre visibility: hidden;
L' utilisation de CSS avec JavaScript pour afficher le contenu
Cet exemple montre comment utiliser CSS et JavaScript pour afficher un élément sur un clic.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»
CSS Affichage / Propriétés Visibilité
| Propriété | La description |
|---|---|
| display | Indique comment un élément doit être affiché |
| visibility | Indique si un élément doit être visible |