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

2932 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