Programmation d'apprentissage: Quelle est la différence entre la visibilité: cachée et l'affichage: aucune?


Réponse 1:

visibilité aucune ne laisse encore d'espace pour l'élément sur la page. Il ne le supprime pas de la page.

display none supprime l'élément du flux normal de la page permettant aux autres éléments de se remplir. Il est toujours accessible via le DOM.

Ce n'est pas l'explication complète, mais c'est suffisant pour vous aider à démarrer.


Réponse 2:

En utilisant display: aucun, l'effet serait le même que si vous veniez de supprimer complètement l'élément de la page Web.

Le navigateur ne rendra pas l'élément ni aucun enfant, bien qu'il soit toujours là et que vous pouvez le modifier en utilisant CSS ou JavaScript.

Regardons l'exemple.

HTML:

Premier
Deuxième
Troisième

Et le CSS:

.box1, .box-2, .box-3 {
    hauteur: 30px;
}

.box-2 {
    affichage: aucun;
}

Si vous exécutez ce code, vous verrez que le navigateur affiche le premier et le troisième div, tout en agissant comme si le deuxième div n'était pas là du tout.

Maintenant, au lieu d'afficher: aucun, mettez la visibilité: cachée là.

Ce que vous verrez rapidement, c'est qu'il y a un écart de 30 pixels entre ces deux boîtes. Cela signifie que le navigateur Web affiche toujours l'élément, mais il est invisible. Il se tient là, prend de l'espace et n'est pas complètement éliminé de la page Web comme avec l'affichage: aucun