Quelle est la différence entre visibilité : cachés et afficher : aucun ?

Question

Les règles CSS et tous deux entraînent l’élément n’étant ne pas visible. Sont ces synonymes ?

Answer 1

display:none signifie que la balise en question n'apparaîtra pas sur la page du tout (bien que vous pouvez toujours interagir avec elle à travers les dom). Il n'y aura pas d'espace prévu pour elle, entre autres balises. visibility:hidden signifie que, contrairement aux display:none, la balise n'est pas visible, mais l'espace est alloué sur la page. ainsi, par exemple,

<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>

display:none serait:

test | test |

visibility:hidden serait:

test | test |

En visibility:hidden la balise est rendu, il n'est tout simplement pas vu sur la page.

Answer 2

Ils ne sont pas synonymes.
display:none supprime l'élément du flux normal de la page, permettant à d'autres éléments à remplir.
visibility:hidden feuilles de l'élément dans le flux normal de la page tel que est toujours occupe l'espace.

Imaginez-vous en ligne pour une balade dans un parc d'attractions et quelqu'un dans la ligne est tellement bruyant que la sécurité cueille de la ligne. Tout le monde en ligne sera alors avancer d'une position à remplir le maintenant le logement vide. C'est comme display:none.

Cela contraste avec la situation semblable, mais que quelqu'un en face de vous enfile une cape d'invisibilité. Lors de l'affichage de la ligne, il ressemble à il y a un espace vide, mais les gens ne peuvent pas vraiment combler ce vide à la recherche de l'espace parce que quelqu'un est toujours là. C'est comme visibility:hidden.

.

Answer 3

Une chose vaut la peine d'ajouter, si ce n'était pas demandé, c'est qu'il y a une troisième option de prise de l'objet complètement transparent. Considérer:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

Dans ce cas, vous bénéficiez de:

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

JSFiddle démo

La différence entre 1 et 2 a déjà été souligné (à savoir, 2 encore prend de la place). Cependant, il y a une différence entre 2 et 3: dans le cas 3, la souris va encore passer à la main lorsque le curseur sur le lien, et l'utilisateur peut cliquer sur le lien, et les événements Javascript sera encore le feu sur le lien. Le comportement lors de la sélection de texte peut varier entre les navigateurs.

Remarque: par souci De concision, je ne liste "opacity: 0;" sur le 3ème lien, mais les anciennes versions de IE ne reconnaît pas cette règle CSS. Si vous souhaitez soutenir les anciens navigateurs IE, ces modèles doivent être utilisés pour le même effet: "zoom: 1; filter: alpha(opacity = 0);"

Answer 4

``supprime l’élément de flux de mise en page.

``Il se cache mais laisse l’espace.

Answer 5

Ils ne sont pas synonymes - `` supprime l’élément du flux de la page et le reste des flux de la page comme si il n’étaient pas là.

``masque de l’élément de la vue, mais pas le flux de la page, laissant l’espace pour cela sur la page.