Frage Was ist der Unterschied zwischen Sichtbarkeit: versteckt und Anzeige: keine?


Die CSS-Regeln visibility:hidden und display:none Beides führt dazu, dass das Element nicht sichtbar ist. Sind diese Synonyme?


926
2017-09-25 12:37


Ursprung


Antworten:


display:none bedeutet, dass das fragliche Tag überhaupt nicht auf der Seite erscheint (obwohl Sie mit dem dom immer noch interagieren können). Zwischen den anderen Tags wird kein Speicherplatz zugewiesen.

visibility:hidden bedeutet das im Gegensatz zu display:noneDas Tag ist nicht sichtbar, aber auf der Seite ist Platz dafür reserviert. Das Tag wird gerendert, es wird nur auf der Seite nicht angezeigt.

Beispielsweise:

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

Ersetzen [style-tag-value] mit display:none Ergebnisse in:

test |   | test

Ersetzen [style-tag-value] mit visibility:hidden Ergebnisse in:

test |                        | test

1179
2017-09-25 12:40



Sie sind keine Synonyme.

display:none entfernt das Element aus dem normalen Fluss der Seite, sodass andere Elemente ausgefüllt werden können.

visibility:hidden verlässt das Element im normalen Fluss der Seite so, dass noch Platz belegt ist.

Stellen Sie sich vor, Sie stehen Schlange für eine Fahrt in einem Vergnügungspark und jemand in der Schlange wird so wütend, dass die Sicherheit sie aus der Schlange reißt. Jeder in der Reihe wird sich dann um eine Position vorwärts bewegen, um den nun leeren Platz zu füllen. Das ist wie display:none.

Vergleichen Sie dies mit der ähnlichen Situation, aber dass jemand vor Ihnen einen Tarnumhang anzieht. Beim Betrachten der Linie sieht es so aus, als wäre ein leerer Raum vorhanden, aber die Leute können diesen leeren Raum nicht wirklich ausfüllen, weil jemand noch da ist. Das ist wie visibility:hidden.


184
2017-09-25 13:50



Eine Sache, die hinzugefügt werden sollte, obwohl sie nicht gefragt wurde, ist, dass es eine dritte Möglichkeit gibt, das Objekt vollständig transparent zu machen. Erwägen:

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.

In diesem Fall erhalten Sie:

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

Auf den Unterschied zwischen 1 und 2 wurde bereits hingewiesen (2 nimmt noch Platz ein). Es gibt jedoch einen Unterschied zwischen 2 und 3: In Fall 3 wird die Maus immer noch auf die Hand wechseln, wenn sie über den Link schwebt, und der Benutzer kann immer noch auf den Link klicken, und Javascript-Ereignisse werden weiterhin auf den Link ausgelöst. Das ist normalerweise nicht das Verhalten, das du willst. Das Verhalten bei der Textauswahl kann auch zwischen den Browsern variieren.


82
2017-10-02 21:27



display:none entfernt das Element aus dem Layoutfluss.

visibility:hidden verbirgt es, verlässt aber den Raum.


74
2017-09-25 12:39



Es gibt einen großen Unterschied, wenn es um Kindknoten geht. Zum Beispiel: Wenn Sie ein Eltern-Div und ein verschachteltes Child-Div. Also wenn du so schreibst:

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

In diesem Fall ist keiner der divs sichtbar. Aber wenn du so schreibst:

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

Dann wird das Kind-Div angezeigt, während das Eltern-Div nicht angezeigt wird.


53
2018-01-14 09:39



Sie sind keine Synonyme - display: none Entfernt das Element aus dem Seitenfluss, und der Rest der Seite fließt so, als wäre sie nicht vorhanden.

visibility: hidden blendet das Element aus der Ansicht aus, nicht jedoch den Seitenfluss, sodass auf der Seite Platz für die Seite bleibt.


17
2017-09-25 12:41



display: none Entfernt das Element vollständig von der Seite und die Seite wird so erstellt, als wäre das Element überhaupt nicht vorhanden.

Visibility: hidden Verlässt den Raum im Dokumentenfluss, obwohl Sie ihn nicht mehr sehen können.

Je nachdem, was Sie tun, kann dies einen großen Unterschied machen oder auch nicht.


14
2017-09-25 12:40



Mit visibility:hidden Das Objekt nimmt auf der Seite immer noch die vertikale Höhe ein. Mit display:noneEs ist vollständig entfernt. Wenn Sie Text unter einem Bild haben und Sie tun display:none, dieser Text wird nach oben verschoben, um den Raum zu füllen, in dem das Bild war. Wenn Sie Sichtbarkeit haben: versteckt bleibt der Text am selben Ort.


11
2017-09-25 12:41



display:none versteckt das Element und kollabiert den Platz, den es eingenommen hat visibility:hidden Versteckt das Element und bewahrt den Elementbereich. display: none wirkt sich auch auf einige der Eigenschaften aus, die in älteren Versionen von IE und Safari von JavaScript zur Verfügung stehen.


10
2017-09-25 12:41



Wenn die Sichtbarkeitseigenschaft auf festgelegt ist "hidden"nimmt der Browser immer noch Platz auf der Seite für den Inhalt ein, obwohl er unsichtbar ist.
Aber wenn wir ein Objekt aufstellen "display:none"Der Browser weist keinen Platz auf der Seite für seinen Inhalt zu.

Beispiel:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Details anzeigen


6
2017-12-27 05:25