Accueil > Développeur > CSS

Quels sont les moyens que CSS se cache ? Quelle est la différence Display : none, opacité : 0, visibilité : cachés ?

Source : Internet
Auteur : utilisateur
Créez un compte Alibaba Cloud et obtenez un essai gratuit avec plus de 40 produits. Le compte entreprise peut bénéficier d'un essai gratuit d'une valeur de 1200 dollars US. Inscrivez-vous maintenant !
Lorsque nous écrivons une page, nous utilisons souvent de se cacher, se cacher, quelles méthodes sont là et quelle est la différence entre eux ?
Vous pouvez définir la valeur d’opacité à 0, définir la visibilité caché ou afficher voix contre zéro. Mais il existe des différences de chaque approche, et ces différences permettent de faire les bons choix dans une situation donnée. L’article suivant vous parlera sur leurs différences, afin que nous pouvons choisir la bonne manière selon l’occasion.

1.Display : aucun
Affectez à la propriété Display à none, et avec cette propriété, l’élément hidden n’occupe pas tout l’espace. L’effet de cette approche est comme un élément qui n’existe pas du tout, et les éléments descendants de l’élément sont cachés en même temps. Autrement dit, l’élément disparaît complètement sur la page, et en termes populaires, il est invisible et intouchable.
Exemple : Utiliser le style « afficher : none » pour masquer les é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>

:

2, opacité
Cette propriété est de régler l’opacité de l’objet, lorsque sa transparence est 0, visuellement, il est allé, mais il occupe encore que position, en termes populaires est invisible, mais peut se faire sentir. Et il travaille sur la mise en page de la page Web, en ajoutant les éléments de la propriété, et sa teneur en arrière-plan et élément va changer aussi.
Exemple : Utiliser le style « opacity : 0 » pour cacher 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>

:

3, visibilité : caché
Lorsque la valeur de propriété est définie hidden, l’élément est masqué, mais l’espace occupé par l’objet sur la page n’a pas changé et est généralement invisible mais palpable. Et il fonctionne sur la présentation de la page Web, qui ressemble à la propriété Opacity, mais la seule différence de l’opacité, c’est qu’il ne répond pas à l’interaction de l’utilisateur.
Exemple : Utiliser le style « visibilité : caché » pour masquer les é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>

:

Ce qui précède décrit 3 méthodes cachés, dont chacun est différent, dans le projet actuel, en fin de compte doit être utilisé, selon la situation.

Cet article est une version anglaise d'un article publié initialement en langue chinoise sur aliyun.com. Il est uniquement fourni à titre informatif. Ce site Web ne fait aucune déclaration ni ne donne aucune garantie, expresse ou implicite, quant à l'exactitude, l'exhaustivité, la propriété ou la fiabilité de l'article ou de toute traduction de celui-ci. Pour toute remarque ou réclamation au sujet de l'article, veuillez envoyer un courriel à l'adresse info-contact@alibabacloud.com en fournissant une description détaillée du problème ou de la réclamation. Un membre de notre équipe vous contactera dans les 5 jours ouvrables. Une fois vérifié, le contenu incriminé sera immédiatement supprimé.

Nous contacter

Le contenu de cette page provient d'Internet et ne reflète pas l'opinion d'Alibaba Cloud ; les produits et services mentionnés sur cette page n'ont aucune relation avec Alibaba Cloud. Si le contenu de la page vous semble problématique, veuillez nous écrire un courriel, nous traiterons le problème dans les 5 jours suivant la réception de votre message.

Si vous constatez des cas de plagiat de la part de la communauté, veuillez envoyer un courriel à : info-contact@alibabacloud.com et fournir des preuves pertinentes. Un membre de notre équipe vous contactera dans les 5 jours ouvrables.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More