Heim > Artikel > Web-Frontend > Was ist der Unterschied zwischen der Verwendung von „display:none' und „visibility:hidden'?
Was ist der Unterschied zwischen der Verwendung von „display:none' und „visibility:hidden'?
- 零下一度Original
- 2017-06-24 14:03:152290Durchsuche
Ich bin heute auf ein kleines Problem gestoßen, als ich eine Tab-Navigationsleiste erstellt und auf eine Tab-Seite geklickt habe, um andere Tab-Seiten auszublenden. Die erste Idee war, display:none zur Steuerung zu verwenden Nachdem ich es geschrieben hatte, stellte ich fest, dass es bei der Verwendung der Anzeige ein Problem gibt, das heißt, das Karussellbild der zweiten Registerkarte erhält die Breite eines Elements auf der zweiten Registerkarte, wenn die Seite gerendert wird adaptiver Effekt. Da es ausgeblendet wurde, beträgt die Breite 0, was bedeutet, dass die Höhe des Karussellbilds ebenfalls 0 ist. Später, nachdem display:none in Visibility:hidden geändert wurde, kann es normal angezeigt und abgespielt werden.
Der Unterschied zwischen display:none und Visibility:hidden ist:
1 display:none verschwindet vollständig und nimmt keinen Platz im Dokumentfluss ein, und der Browser analysiert das Element nicht ; Visibility: Hidden verschwindet optisch, was als Auswirkung einer Transparenz von 0 verstanden werden kann. Es nimmt Platz im Dokumentfluss ein und der Browser analysiert das Element
2 Leistung als display:none. Wenn display:none die Sichtbarkeit wechselt, generiert die Seite einen Reflow (wenn einige Elemente auf der Seite die Größe, das Layout, die Anzeige, das Ausblenden usw. ändern müssen, wird die Seite neu erstellt, was einem Reflow entspricht. Alle Seiten müssen einen Reflow erzeugen, wenn sie zum ersten Mal geladen werden. Wenn sich die Sichtbarkeit ändert, ob sie angezeigt wird oder nicht, wird kein Reflow verursacht.
Also verwende ich „visibility:hidden“, und das Karussellbild auf der zweiten Registerkarte kann die Breite erhalten und beim Rendern der Seite anpassen.
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen der Verwendung von „display:none' und „visibility:hidden'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!