Was ist der Unterschied zwischen visibility:hidden und display:none?

Question

Die CSS-Regeln visibility:hidden y display:none führen beide dazu, dass das Element nicht sichtbar ist. Sind dies Synonyme?

Answer 1

display:none bedeutet, dass der betreffende Tag nicht auf der Seite erscheint (obwohl Sie über das Dom immer noch mit ihm interagieren können). Es wird kein Platz zwischen den anderen Tags für ihn reserviert.

visibility:hidden bedeutet, dass im Gegensatz zu display:none ist der Tag nicht sichtbar, aber es wird ihm Platz auf der Seite zugewiesen. Das Tag wird gerendert, es ist nur nicht auf der Seite zu sehen.

Zum Beispiel:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Ersetzen von [style-tag-value] をもって display:none führt zu:

test |   | test

Ersetzen von [style-tag-value] をもって visibility:hidden führt zu:

test |                        | test

Answer 2

Sie sind keine Synonyme.

display:none entfernt das Element aus dem normalen Fluss der Seite, so dass andere Elemente es ausfüllen können.

visibility:hidden lässt das Element im normalen Fluss der Seite, so dass es weiterhin Platz einnimmt.

Stellen Sie sich vor, Sie stehen in einem Vergnügungspark in der Schlange für ein Fahrgeschäft und jemand in der Schlange wird so rüpelhaft, dass der Sicherheitsdienst ihn aus der Schlange herausnimmt. Alle in der Schlange rücken dann eine Position vor, um den nun leeren Platz zu besetzen. Das ist wie display:none .

Vergleichen Sie dies mit einer ähnlichen Situation, in der jemand vor Ihnen einen Unsichtbarkeitsumhang anlegt. Beim Betrachten der Schlange sieht es so aus, als ob es einen leeren Raum gibt, aber die Leute können diesen leeren Raum nicht wirklich füllen, weil immer noch jemand da ist. Das ist wie visibility:hidden .

Answer 3

Es gibt noch eine dritte Möglichkeit, das Objekt vollständig transparent zu machen, auch wenn danach nicht gefragt wurde. Überlegen Sie:

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.

(Klicken Sie unbedingt auf die Schaltfläche "Run code snippet" oben, um das Ergebnis zu sehen).

Auf den Unterschied zwischen 1 und 2 wurde bereits hingewiesen (2 braucht nämlich noch Platz). Es gibt jedoch einen Unterschied zwischen 2 und 3: In Fall 3 wechselt die Maus immer noch zur Hand, wenn sie über dem Link schwebt, und der Benutzer kann immer noch auf den Link klicken, und Javascript-Ereignisse werden immer noch auf den Link ausgelöst. Dies ist normalerweise no das von Ihnen gewünschte Verhalten (aber vielleicht ist es manchmal so?).

Ein weiterer Unterschied besteht darin, dass, wenn Sie den Text markieren und dann als reinen Text kopieren/einfügen, Sie Folgendes erhalten:

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

In Fall 3 wird der Text tatsächlich kopiert. Vielleicht wäre dies für eine Art von Wasserzeichen nützlich, oder wenn Sie einen Copyright-Hinweis verstecken wollten, der auftauchen würde, wenn ein unvorsichtiger Benutzer Ihren Inhalt kopiert/einfügt?

Answer 4

display:none entfernt das Element aus dem Layoutfluss.

visibility:hidden verbirgt es, lässt aber den Platz frei.

Answer 5

Es gibt einen großen Unterschied, wenn es um untergeordnete Knoten geht. Zum Beispiel: Wenn Sie ein übergeordnetes Div und ein verschachteltes untergeordnetes Div haben. Wenn Sie also wie folgt schreiben:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

In diesem Fall wird keines der Divs sichtbar sein. Aber wenn Sie wie folgt schreiben:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

Dann wird das untergeordnete Div sichtbar sein, während das übergeordnete Div nicht angezeigt wird.