Quels sont les moyens de masquer le CSS ? Quelle est la différence entre affichage : aucun, opacité : 0, visibilité : cachée-tutoriel CSS-php.cn

Quels sont les moyens de masquer le CSS ? Quelle est la différence entre affichage : aucun, opacité : 0, visibilité : cachée

yulia

Libérer： 2018-09-06 18:07:43

original

2893 Les gens l'ont consulté

Lorsque nous écrivons des pages, nous utilisons souvent le masquage. Quelles sont les méthodes de masquage et quelles sont leurs différences ?
Vous pouvez définir la valeur d'opacité sur 0, la visibilité sur masquée ou l'affichage sur aucune. Mais chaque méthode présente des différences qui nous permettent de faire le bon choix dans une situation spécifique. L'article suivant vous parlera de leurs différences, afin que vous puissiez choisir la méthode appropriée en fonction de l'occasion.

1.display : aucun
Définissez l'attribut d'affichage sur aucun En utilisant cet attribut, les éléments masqués n'occupent aucun espace. L'effet de cette méthode est comme si l'élément n'existait pas du tout, et les descendants de cet élément seront également masqués en même temps. Autrement dit, l'élément disparaît complètement de la page. En termes simples, il ne peut pas être vu ou touché.
Exemple : Utiliser le style "display:none" pour masquer des éléments

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{width: 100px;height: 100px;background: red;display: none;}
   .a2{width: 100px;height: 100px;background: yellow;}
  </style>
 </head>
 <body>
  <div class="a1">have a nice day</div>
  <div class="a2">have a nice day</div>
 </body>
</html>

Copier après la connexion

Rendu :

Quels sont les moyens de masquer le CSS ? Quelle est la différence entre affichage : aucun, opacité : 0, visibilité : cachée

2. Opacité
Cet attribut sert à définir l'opacité de l'objet. Lorsque sa transparence est de 0, il disparaît visuellement, mais il occupe toujours cette position. est invisible mais tangible. Cela affecte également la mise en page de la page Web. Si un élément est ajouté avec cet attribut, son arrière-plan et le contenu de l'élément changeront également en conséquence.
Exemple : Utiliser le style « opacité : 0 » pour masquer des éléments

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{width: 100px;height: 100px;background: red;opacity: 0;}
   .a2{width: 100px;height: 100px;background: yellow;}
  </style>
 </head>
 <body>
  <div class="a1">have a nice day</div>
  <div class="a2">have a nice day</div>
 </body>
</html>

Copier après la connexion

Rendu :

Quels sont les moyens de masquer le CSS ? Quelle est la différence entre affichage : aucun, opacité : 0, visibilité : cachée

3. visibilité : caché
Lorsque la valeur de l'attribut est définie sur caché, l'élément sera masqué, mais l'espace occupé par l'objet sur la page Web ne changera pas. , cela signifie que Non visible mais tangible. Et affecte la mise en page de la page Web. Cette propriété est similaire à la propriété opacity, mais la seule différence avec l'opacité est qu'elle ne répond à aucune interaction de l'utilisateur.
Exemple : Utiliser le style "visibilité : cachée" pour masquer des éléments

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{width: 100px;height: 100px;background: red;visibility: hidden;}
   .a2{width: 100px;height: 100px;background: yellow;}
  </style>
 </head>
 <body>
  <div class="a1">have a nice day</div>
  <div class="a2">have a nice day</div>
 </body>
</html>

Copier après la connexion

Rendu :

Quels sont les moyens de masquer le CSS ? Quelle est la différence entre affichage : aucun, opacité : 0, visibilité : cachée

L'introduction ci-dessus Il existe 3 méthodes cachées, chaque méthode est différente dans les projets réels, celle à utiliser dépend de la situation.

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Quels sont les moyens de masquer le CSS ? Quelle est la différence entre affichage : aucun, opacité : 0, visibilité : cachée