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

Zusätzlich zu allen anderen Antworten gibt es einen wichtigen Unterschied für IE8: Wenn Sie display:none und versuchen, die Breite oder Höhe des Elements zu ermitteln, gibt IE8 0 zurück (während andere Browser die tatsächlichen Größen zurückgeben). Der IE8 gibt die korrekte Breite oder Höhe nur für visibility:hidden .

Answer 2

display: none; 

Sie wird auf der Seite nicht angezeigt und nimmt keinen Platz ein.

visibility: hidden; 

Ein Element wird ausgeblendet, nimmt aber immer noch den gleichen Platz ein wie vorher. Das Element wird zwar ausgeblendet, wirkt sich aber dennoch auf das Layout aus.

visibility: hidden den Raum zu erhalten, während display: none bewahrt den Raum nicht.

Anzeige Keine Beispiel: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Sichtbarkeit Versteckt Beispiel : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Answer 3

visibility:hidden behält das Element auf der Seite und nimmt den Platz ein, wird aber dem Benutzer nicht angezeigt.

display:none ist auf der Seite nicht verfügbar und nimmt keinen Platz ein.

Answer 4

Anzeige: keine

Dadurch wird das Element aus dem normalen Fluss der Seite entfernt, so dass andere Elemente einspringen können.

Ein Element erscheint nicht auf der Seite, aber wir können trotzdem über das DOM mit ihm interagieren. Es wird kein Platz zwischen den anderen Elementen zugewiesen.

Sichtbarkeit: versteckt

Dabei wird das Element im normalen Fluss der Seite belassen, so dass es weiterhin Platz einnimmt.

Ein Element ist nicht sichtbar und der Platz für das Element wird auf der Seite zugewiesen.

Einige andere Möglichkeiten, Elemente auszublenden

Utilice z-index

#element {
   z-index: -11111;
}

Verschieben eines Elements von der Seite

#element {
   position: absolute; 
   top: -9999em;
   left: -9999em;
}

Interessante Informationen über die Eigenschaften visibility: hidden und display: none

visibility: hidden y display: none sind gleichermaßen leistungsfähig, da sie beide Layout, Paint und Composite neu auslösen. Allerdings, opacity: 0 ist funktional äquivalent zu visibility: hidden und löst den Layoutschritt nicht erneut aus.

Und CSS-Übergangseigenschaft ist auch wichtige Sache, die wir brauchen, um zu kümmern. Denn das Umschalten von visibility: hidden a visibility: visible ermöglichen die Verwendung von CSS-Übergängen, während das Umschalten von display: none a display: block nicht. visibility: hidden hat den zusätzlichen Vorteil, dass keine JavaScript-Ereignisse erfasst werden, während opacity: 0 nimmt Ereignisse auf

Answer 5

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

Ejemplo:

<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