Maison  >  Article  >  interface Web  >  Comment cacher un div en CSS

Comment cacher un div en CSS

藏色散人
藏色散人original
2021-07-27 11:00:084412parcourir

Comment masquer div en CSS : 1. Masquer div via "display:none" ; 2. Masquer div via "visibility:hidden" ; 3. Masquer div via "opacity:0".

Comment cacher un div en CSS

L'environnement d'exploitation de cet article : système windows7, version HTML5&&CSS3, ordinateur DELL G3

Comment masquer div en css ?

Trois façons de masquer Div en CSS

Les attributs d'affichage et de visibilité en CSS peuvent masquer et afficher des éléments html, y compris les couches div

Une :

display:none|block
display:none

Masquer le fichier html, pour être précis dans le navigateur L'élément est clair et n'occupe pas d'espace à l'écran. S'il y a d'autres éléments en dessous, il sera déplacé vers la zone d'espace

display:block

Afficher les éléments HTML cachés

Si d'autres éléments occupent l'espace, il se déplacera vers le bas,

L'espace. est à nouveau occupé par l'élément d'origine

Deux :

visibility:hidden|visible
visibility:hidden

Cacher l'élément, il est vraiment caché, mais il occupe toujours cet espace

visibility:visible

Laisser l'élément être affiché

Lorsque l'attribut de visibilité d'un élément est défini sur le valeur d'effondrement, Pour les éléments généraux, son comportement est le même que celui masqué.

1. Dans Chrome, il n'y a aucune différence entre l'utilisation de la valeur réduite et l'utilisation de la valeur cachée.

2. Firefox, Opera et IE, il n'y a aucune différence entre l'utilisation de la valeur de réduction et l'affichage : aucune.

Trois : attribut

opacity:0

opacity Je crois que tout le monde sait qu'il représente la transparence d'un élément. Après avoir défini la transparence d'un élément à 0, l'élément est également caché aux yeux de nos utilisateurs. éléments. Une chose que cette méthode a en commun avec visibilité:hidden est que l'élément occupe toujours de l'espace après avoir été masqué, mais nous savons tous qu'après avoir défini la transparence sur 0, l'élément est simplement invisible et il existe toujours sur la page.

Ainsi, l'affichage et la visibilité contrôlent si l'élément html existe et s'il est affiché respectivement

L'attribut d'affichage définit si l'élément existe ou non

Et l'attribut de visibilité contrôle uniquement si l'élément est affiché et existe réellement

opacité Le l'élément est masqué, mais il existe toujours sur la page

[Apprentissage recommandé : Tutoriel vidéo CSS]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Comment charger du CSS en HTMLArticle suivant:Comment charger du CSS en HTML