Quelle est la différence entre les propriétés de l’affichage par rapport à la visibilité ?
Réponses
Trop de publicités?
L' visibility propriété n'indique au navigateur d'afficher un élément ou non. C'est soit visible (visible - vous pouvez le voir) ou invisible (hidden - vous ne pouvez pas le voir).
L' display propriété indique au navigateur comment dessiner et afficher un élément, si - si elle doit être affiché sous forme d'un inline élément (c'est à dire qu'elle coule avec du texte et d'autres éléments en ligne) ou un block-niveau de l'élément (c'est à dire il a de la hauteur et la largeur de propriétés que vous pouvez définir, c'est flottantes, etc), ou d'un inline-block (c'est à dire qu'il agit comme un bloc de boîte, mais est mis inline à la place) et quelques autres (list-item, table, table-row, table-cell, flex, etc).
Lorsque vous définissez un élément d' display: block mais également fixé visibility: hidden, le navigateur traite encore comme un élément de bloc, sauf que vous venez de ne pas le voir. Le genre de comment vous situez-vous une boîte rouge sur le dessus d'un invisible box: la boîte rouge on dirait qu'il est flottant dans les airs alors qu'en réalité, il est assis sur le dessus d'une boîte physique que vous ne pouvez pas voir.
En d'autres termes, cela signifie éléments avec display qui n'est pas none continueront d'influencer les flux d'éléments dans une page, peu importe qu'ils soient visibles ou non. Cases entourant un élément avec display: none va se comporter comme si cet élément n'a jamais été là (même si elle reste dans les DOM).
Mark de Jong
Points
41
visibility: hidden;
- l'élément ne sera pas peint ET ne pas recevoir de la souris/les événements tactiles, mais l'espace qu'il occupe est toujours occupée
- parce qu'il est toujours là pour la disposition, vous pouvez le mesurer, sans qu'il soit visible
- changer le contenu sera temps de brasage/layouting la page
- la visibilité est héréditaire, donc cela signifie que vous pouvez faire subchildren visibles en leur donnant de la visibilité: visible;
display: none;
- fera l'élément participe pas à l'écoulement/de mise en page
- peut (selon le navigateur utilisé) tuer des animations Flash et des iframes (qui sera restart/reload en montrant encore une fois), même si vous pouvez empêcher que cela se passe avec les iframes
- l'élément à ne pas occuper tout l'espace. pour la disposition, c'est comme il n'existe pas
- de certains navigateurs/périphériques (comme l'iPad) directement reprendre la mémoire utilisée par cet élément, provoquant de petites hickups si vous basculez entre aucun et une autre valeur lors des animations
notes supplémentaires:
- les images dans le contenu caché: dans tous les navigateurs populaires images sont toujours chargées, même si elles sont à l'intérieur de n'importe quel élément avec visibility: hidden; display: none;
- polices de caractères dans le contenu caché: les navigateurs webkit (Chrome/Safari) peut retarder le chargement des polices personnalisées qui est utilisé uniquement dans les éléments cachés, y compris par le biais de la visibilité ou de l'affichage. Cela peut vous amener à mesurer des éléments qui sont encore en utilisant une police de secours jusqu'à ce que la police personnalisée est chargé.
matpol
Points
2602
SimonDowdles
Points
921
display:none; supprimer les éléments DOM style visuel / espace physique de la DOM, alors que visibility:hidden; ne sera pas supprimer l'élément, mais simplement de le cacher. Donc une div occupant 300px de l'espace vertical dans votre DOM occupera ENCORE 300px de largeur verticale lorsque la valeur visibility:hidden; mais lorsque la valeur display:none; c'est des styles visuels et de l'espace qu'il occupe sont cachés et de l'espace est libéré pour manque d'un meilleur mot.
[EDIT] - C'était un moment que j'ai écrit ci-dessus, et si je n'étais pas assez bien informés ou avoir une mauvaise journée, je ne sais pas, mais la réalité est, l'élément n'est pas supprimé de la hiérarchie DOM. Tout bloquer l'affichage du niveau de "styles" sont complètement "caché" lors de l'utilisation de display:none, alors qu'avec visibility:hidden; l'élément lui-même est caché, mais il occupe toujours un espace visuel dans les DOM. J'espère que cela efface les choses
