Maison > Article > interface Web > Quels sont les moyens de masquer le CSS ? Quelle est la différence entre affichage : aucun, opacité : 0, visibilité : cachée
Quels sont les moyens de masquer le CSS ? Quelle est la différence entre affichage : aucun, opacité : 0, visibilité : cachée
- yuliaoriginal
- 2018-09-06 18:07:432888parcourir
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>Rendu :
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>Rendu :
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>Rendu :
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!