English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attribut Visibility spécifie si un élément est visible ou caché.
Vous pouvez utiliser l'attribut visibility pour spécifier si un élément est visible ou non. Cet attribut peut prendre l'une des valeurs suivantes du tableau suivant :
| Valeur | Description |
|---|---|
| visible | Valeur par défaut. La boîte et son contenu sont visibles. |
| hidden | La boîte et son contenu sont invisibles, mais affectent toujours la mise en page de la page. |
| collapse | Cette valeur supprime complètement la ligne ou la colonne de l'affichage. Cette valeur est utilisée pour les éléments de ligne, de groupe de lignes, de colonne et de groupe de colonnes. |
| inherit | Les valeurs de l'attribut de visibilité doivent être héritées de l'élément parent, c'est-à-dire utiliser la même valeur de visibilité que l'élément parent. |
visibility: collapse; Cependant, les règles de style suppriment les éléments internes de la table, sans autrement affecter la mise en page de la table. L'espace généralement occupé par les éléments de table est remplacé par la marge des éléments adjacents.
Remarque :Si visibility: collapse; est spécifié pour d'autres éléments (et non pour les éléments de table), son comportement est le même que hidden.
CSS display vs visibility semble être la même chose, mais en réalité, elles sont complètement différentes et causent souvent des confusion aux développeurs Web débutants.
visibility: hidden; cache l'élément, mais il occupe encore de l'espace dans le布局. Si la visibilité des sous-éléments de la boîte cachée est définie sur "visible", ils seront visibles.
display: none; ferme l'affichage et supprime complètement l'élément du document. Même si son HTML reste dans le code source, il n'occupe aucune place. Même si toutes les propriétés d'affichage des sous-éléments sont définies sur none, l'affichage sera fermé.
L'attribut Visibility possède quatre valeurs disponibles (visible, hidden, collapse et inherit), mais les valeurs couramment utilisées sont visible et hidden.
visibility: visible /* L'élément est visible, valeur par défaut */ visibility: hidden /* L'élément est invisible, mais une espace correspondante est conservée pour lui */ visibility: collapse /* Agit uniquement sur les objets table, peut supprimer des lignes ou des colonnes sans affecter la mise en page du tableau. Si cette valeur est utilisée sur des objets autres que table, elle se manifeste comme hidden . */ visibility: inherit /* Hérite de la valeur visibility de l'élément parent. */
Il y a de nombreuses valeurs disponibles pour la propriété Display, mais ici nous nous concentrons uniquement sur quelques-unes : block, none et inline
display: none /* L'élément est invisible et son espace n'est pas conservé */ display: block /* Présenté comme un élément en bloc (généralement prend une ligne complète) */ display: inline /* Présenté comme un élément en ligne (généralement ne prend pas une ligne complète) */
Il ressort de cela que bien que les propriétés Visibility et Display puissent toutes deux cacher un élément, leur différence réside en ce que visibility: hidden conserve l'espace nécessaire pour l'élément sur la page tout en le cachant, tandis que display: none supprime l'élément comme s'il était supprimé de la page.
De plus, la différence entre display: block et display: inline réside en ce que les éléments block occupent une ligne complète sur la page, tandis que les éléments inline ne le font pas. Certains objets sont par défaut des éléments block, tandis que d'autres sont des éléments inline. Il est important de veiller à éviter les redéfinitions de propriétés identiques lors de leur utilisation.
Les propriétés Visibility et Display peuvent toutes deux cacher des éléments de la page, mais leur différence réside dans la manière dont ils réagissent au flux normal du document.
Si vous souhaitez cacher un élément mais conserver l'espace qu'il occupe sur la page, vous devez utiliser visibility: hidden . Si vous souhaitez cacher un élément tout en laissant d'autres contenus combler l'espace vide, vous devez utiliser display: none .