Quelle est la différence entre la visibilité: cachée et affichage: aucune?

La visibility:hidden règles CSS visibility:hidden et display:none deux display:none à l’élément de ne pas être visible. Sont ces synonymes?

    display:none signifie que le tag en question n’apparaîtra pas sur la page (bien que vous puissiez toujours interagir avec lui via le dom). Il n’y aura plus d’espace entre les autres balises.

    visibility:hidden signifie que contrairement à display:none , la balise n’est pas visible, mais de l’espace y est alloué sur la page. Le tag est rendu, il n’est pas visible sur la page.

    Par exemple:

     test | Appropriate style in this tag | test 

    Remplacer [style-tag-value] par display:none traduit par:

     test | | test 

    Remplacer [style-tag-value] par la visibility:hidden résultats visibility:hidden dans:

     test |                       | test 

    Ce ne sont pas des synonymes.

    display:none supprime l’élément du stream normal de la page, permettant à d’autres éléments de se remplir.

    visibility:hidden laisse l’élément dans le stream normal de la page tel qu’il est toujours occupé.

    Imaginez que vous êtes en ligne pour un tour dans un parc d’attractions et que quelqu’un dans la queue soit tellement tapageur que la sécurité les arrache. Tout le monde en ligne avancera ensuite d’une position pour remplir le créneau maintenant vide. C’est comme l’ display:none .

    Comparez cela avec la situation similaire, mais que quelqu’un en face de vous met une cape d’invisibilité. En regardant la ligne, il semblerait qu’il y ait un espace vide, mais les gens ne peuvent pas vraiment remplir cet espace vide parce que quelqu’un est toujours là. C’est comme la visibility:hidden .

    Une chose mérite d’être ajoutée, bien qu’elle n’ait pas été posée, à savoir qu’il existe une troisième option pour rendre l’object complètement transparent. Considérer:

     1st unseen link.
    2nd unseen link.
    3rd unseen link.

    display:none supprime l’élément du stream de présentation.

    visibility:hidden cache mais quitte l’espace.

    Il y a une grande différence en ce qui concerne les nœuds enfants. Par exemple: Si vous avez un div parent et un div enfant nested. Donc, si vous écrivez comme ceci:

      

    Dans ce cas, aucun des divs ne sera visible. Mais si vous écrivez comme ceci:

      

    Ensuite, le div enfant sera visible alors que le div parent ne sera pas affiché.

    Ce ne sont pas des synonymes – display: none supprime l’élément du stream de la page, et le rest de la page s’écoule comme s’il n’y était pas.

    visibility: hidden masque l’élément à la vue, mais pas le stream de la page, en laissant de la place sur la page.

    display: none supprime entièrement l’élément de la page et la page est construite comme si l’élément n’était pas du tout présent.

    Visibility: hidden laisse de l’espace dans le stream de documents même si vous ne pouvez plus le voir.

    Cela peut ou non faire une grande différence en fonction de ce que vous faites.

    Avec visibility:hidden l’object occupe toujours une hauteur verticale sur la page. Avec display:none n’est complètement supprimé. Si vous avez du texte sous une image et que vous l’ display:none , ce texte augmentera pour remplir l’espace où se trouvait l’image. Si vous faites de la visibilité: caché, le texte restra au même endroit.

    display:none cachera l’élément et réduira l’espace qu’il occupait, alors que visibility:hidden cachera l’élément et préservera l’espace des éléments. display: none affecte également certaines des propriétés disponibles depuis JavaScript dans les anciennes versions d’IE et Safari.

    Si la propriété de visibilité est définie sur "hidden" , le navigateur prendra toujours de la place sur la page pour le contenu, même s’il est invisible.
    Mais lorsque vous définissez un object sur "display:none" , le navigateur n’alloue pas d’espace sur la page pour son contenu.

    Exemple:

     
    Content not display on screen and even space not taken.
    Content not display on screen but it will take space on screen.

    Voir les détails

    En plus de toutes les autres réponses, il existe une différence importante pour IE8: Si vous utilisez display:none et essayez d’obtenir la largeur ou la hauteur de l’élément, IE8 renvoie 0 (alors que les autres navigateurs renvoient les tailles réelles). IE8 renvoie la largeur ou la hauteur correcte uniquement pour la visibility:hidden .

    visibility:hidden conservera l’élément dans la page et occupera cet espace mais ne sera pas affiché à l’utilisateur.

    display:none ne sera disponible dans la page et n’occupera aucun espace.

    visibility:hidden cache un élément, mais il occupera toujours le même espace qu’auparavant. L’élément sera caché, mais affectera toujours la mise en page.

    display:none cache un élément et ne prendra aucun espace. L’élément sera masqué et la page sera affichée comme si l’élément n’était pas là:

    visibility:hidden préserve l’espace, alors que l’ display:none ne préserve l’espace.

    Une autre différence est la visibility:hidden travaux visibility:hidden dans les navigateurs réellement anciens et l’ display:none ne fonctionne pas:

    https://www.w3schools.com/cssref/pr_class_visibility.asp

    https://www.w3schools.com/cssref/pr_class_display.asp

     display: none; 

    Il ne sera pas disponible sur la page et n’occupera aucun espace.

     visibility: hidden; 

    il cache un élément, mais il occupera toujours le même espace qu’auparavant. L’élément sera masqué, mais affectera néanmoins la mise en page.

    visibility: hidden préserve l’espace, alors que l’ display: none ne préserve l’espace.

    Affichage Aucun Exemple: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

    Exemple de visibilité masquée: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

    display:none; ne sera pas afficher l’élément ni ne va pas atsortingbuer de l’espace pour l’élément sur la page, tandis que la visibility:hidden; ne sera pas afficher l’élément sur la page mais allouera de l’espace sur la page. Nous pouvons accéder à l’élément dans DOM dans les deux cas. Pour mieux le comprendre, consultez le code suivant: display: none vs visibility: hidden