Was ist die Sichtbarkeitseigenschaft in CSS? Wie unterscheidet es sich von Display: Keine?

Was ist die Sichtbarkeitseigenschaft in CSS? Wie unterscheidet es sich von Display: Keine?

Die visibility in CSS wird verwendet, um zu steuern, ob ein Element auf der Webseite sichtbar ist. Es hat mehrere mögliche Werte, einschließlich visible , hidden , collapse und inherit . Wenn visibility eines Elements auf hidden ist, ist das Element für den Benutzer nicht sichtbar, nimmt aber dennoch Platz im Layout der Seite ein. Dies bedeutet, dass sich andere Elemente nicht bewegen, um den Raum zu füllen, in dem sich das verborgene Element befindet.

Im Gegensatz dazu entfernt display: none entfernt das Element vollständig aus dem Layout. Wenn ein Element auf display: none , ist es vollständig versteckt und nimmt keinen Platz im Layout ein. Andere Elemente auf der Seite verschieben sich, um den zuvor besetzten Raum zu füllen. Dieser grundlegende Unterschied in der visibility: hidden und display: none Auswirkungen auf das Layout ist entscheidend für die Entscheidung, welche in verschiedenen Szenarien verwendet werden soll.

Welche Auswirkungen haben die Sichtbarkeit von "Hidden" auf das Layout eines Elements?

Wenn Sie visibility eines Elements auf hidden festlegen, ist es für den Benutzer nicht sichtbar, wirkt sich jedoch weiterhin auf das Layout der Seite aus. Der Raum, den das Element im Layout einnimmt, bleibt reserviert. Das heisst:

• Das Element behält seine Abmessungen (Breite, Höhe, Ränder usw.) bei und beeinflusst weiterhin die Positionierung anderer Elemente um ihn herum.
• Wenn das versteckte Element ein Element auf Blockebene ist, erstellt es im Layout weiterhin eine neue Zeile.
• Jegliche Kinderelemente des verborgenen Elements werden ebenfalls verborgen sein, aber auch sie werden ihre jeweiligen Räume im Layout immer noch besetzen.

Wenn Sie beispielsweise einen Absatz von Text und Bild nebeneinander haben und die Sichtbarkeit des Bildes auf hidden festlegen, verschiebt sich der Absatz nicht nach links, um den Raum zu besetzen, den das Bild aufnimmt. Das Layout bleibt visuell unverändert, mit Ausnahme des Fehlens des Bildes.

Wie können Sie die Sichtbarkeit eines Elements mithilfe von CSS -Animationen umschalten?

Um die Sichtbarkeit eines Elements mithilfe von CSS -Animationen umzuschalten, können Sie die animation zusammen mit Keyframes verwenden, um zwischen visibility: hidden und visibility: visible . Hier ist ein Schritt-für-Schritt-Ansatz:

1. Definieren Sie die Schlüsselrahmen:
   Sie müssen Keyframes erstellen, die definieren, wie sich die Sichtbarkeit des Elements im Laufe der Zeit ändert. Sie können auch andere Eigenschaften wie opacity für reibungslosere Übergänge animieren.

    <code class="css">@keyframes fadeInOut { 0%, 100% { visibility: hidden; opacity: 0; } 50% { visibility: visible; opacity: 1; } }</code>

2. Wenden Sie die Animation an:
   Wenden Sie die Animation auf das Element an, das Sie umschalten möchten. Sie können die Dauer und andere Timing -Funktionen nach Bedarf steuern.

    <code class="css">.toggle-visibility { animation: fadeInOut 2s infinite; }</code>

In diesem Beispiel wird die fadeInOut -Animation das Element alle 2 Sekunden in ein- und ausblenden und seine Sichtbarkeit umschaltet. Sie können das Timing, die Anzahl der Iteration und andere Eigenschaften an Ihre spezifischen Anforderungen anpassen.

In welchen Szenarien würden Sie "Sichtbarkeit: versteckt" über 'Display: None' verwenden?

Wählen Sie zwischen visibility: hidden und display: none hängt von Ihren spezifischen Anforderungen an, wie sich das Layout verhalten sollte. Hier sind einige Szenarien, in denen visibility: hidden möglicherweise gegenüber display: none :

• Aufrechterhaltung des Layouts: Wenn Sie ein Element ausblenden müssen, aber das Layout so halten möchten, als ob das Element noch vorhanden wäre, verwenden Sie visibility: hidden . Dies ist nützlich, um Platzhalter zu erstellen oder eine konsistente Struktur auf der Seite aufrechtzuerhalten, insbesondere in reaktionsschnellen Designs.
• Progressive Verbesserung: In Fällen, in denen Sie progressive Verbesserung implementieren, können Sie mit Inhalten beginnen, die versteckt und dann mit JavaScript- oder CSS -Animationen enthüllt werden. Mithilfe von visibility: hidden ermöglicht es, dass der Inhalt zunächst versteckt, aber dennoch zugänglich ist und Layout-Affecting ist.
• Barrierefreiheit Bedenken: Wenn Sie Inhalte ausblenden möchten, aber dennoch von Bildschirmlesern (zu Zugangszwecken) zugegriffen werden können, kann visibility: hidden kann von Vorteil sein. Der Inhalt ist visuell versteckt, aber dennoch Teil des Dokumentflusses und kann von assistiven Technologien gelesen werden.
• Leistungsüberlegungen: In Szenarien, in denen die Sichtbarkeit häufig umschaltet, kann visibility: hidden kann leistungsfähiger sein, da der Browser nicht jedes Mal neu berechnet werden muss, wenn sich die Sichtbarkeit ändert, im Gegensatz zu display: none .

Zusammenfassend ist visibility: hidden ist vorzuziehen, wenn Sie ein Element ausblenden müssen, während Sie seinen Einfluss auf das Layout der Seite intakt halten, während display: none verwendet werden, wenn Sie das Element vollständig aus dem Layout entfernen möchten.

Das obige ist der detaillierte Inhalt vonWas ist die Sichtbarkeitseigenschaft in CSS? Wie unterscheidet es sich von Display: Keine?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!