Maison >interface Web >tutoriel HTML >Quelle est la différence entre utiliser display:none et visible:hidden ?
Quelle est la différence entre utiliser display:none et visible:hidden ?
- 零下一度original
- 2017-06-24 14:03:152324parcourir
J'ai rencontré un petit problème lors de la conception finale aujourd'hui. J'ai créé une barre de navigation par onglets et j'ai cliqué sur une page à onglet pour masquer les autres pages à onglet. À cette époque, la première idée était d'utiliser display: none pour contrôler. l'affichage et le masquage. Après l'avoir écrit, j'ai découvert qu'il y a un problème lors de l'utilisation de l'affichage, c'est-à-dire que l'image carrousel de la deuxième page à onglet obtient la largeur d'un élément dans la deuxième page à onglet lorsque la page est rendue pour créer un effet adaptatif Parce qu'il a été masqué, la largeur est de 0, donc cela provoque La hauteur de l'image du carrousel est également de 0. Plus tard, après avoir changé display:none en visibilité:hidden, il peut être affiché et lu normalement.
La différence entre display:none et visible:hidden est la suivante :
1 display:none disparaît complètement et n'occupe pas de place dans le flux de documents, et le navigateur n'analysera pas l'élément. ; visibilité : Hidden disparaît visuellement, ce qui peut être compris comme l'effet d'une transparence de 0. Cela prend de la place dans le flux du document et le navigateur analysera l'élément
2. performances que display:none Lorsque display:none change de visibilité, la page génère une redistribution (lorsque certains éléments de la page doivent modifier la taille, la mise en page, l'affichage, le masquage, etc., la page est reconstruite, ce qui est une redistribution. Toutes les pages doivent générer une redistribution lorsqu'elles sont chargées pour la première fois), et lorsque la visibilité change d'affichage ou non, cela ne provoquera pas de redistribution.
J'utilise donc la visibilité : cachée, et l'image du carrousel dans la deuxième page à onglet peut obtenir la largeur et l'adapter lors du rendu de la page.
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!