Maison > interface Web > Questions et réponses frontales > Comment cacher un div en CSS

Comment cacher un div en CSS

藏色散人
Libérer: 2023-01-07 11:45:53
original
4477 Les gens l'ont consulté

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
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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

visibility:visible
Copier après la connexion

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
Copier après la connexion

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal