Wie verstecke ich HTML-Elemente mit CSS? Vier Möglichkeiten, HTML-Elemente auszublenden

Das heutige Webdesign wird immer dynamischer. Manchmal müssen wir bestimmte Elemente ausblenden und nur bei Bedarf anzeigen. Es gibt vier Möglichkeiten, wie wir CSS zum Ausblenden von HTML-Elementen verwenden. Jede dieser vier Techniken zum Anzeigen und Ausblenden von Elementen hat ihre eigenen Vor- und Nachteile. Hier sind einige Beispiele.

In diesem Artikel werden wir den folgenden HTML-Code und die folgenden CSS-Stile verwenden, um vier Techniken zum Ausblenden von Elementen zu erklären.

<p>Dice used for traditional Dungeons ...</p>
<img src="dice.jpg" alt=”Photograph..." id="dice">
<p>The dice are used to determine...</p>

Der grundlegende CSS-Stil ist wie folgt:

img#dice { float: right; margin-left: 2em; }

Sichtbarkeit: versteckt

img#dice { float: right; margin-left: 2em; visibility: hidden; }

visibility: hidden ist das, was viele Leute verstecken die erste Wahl für ein bestimmtes HTML-Element. Wie im Bild rechts gezeigt, fehlt das Bild, es bleibt aber auch ein leerer Bereich dort, wo das Originalbild war. Dieses Attribut verbirgt einfach ein Element, der vom Element eingenommene Platz ist jedoch weiterhin vorhanden.

Durch die Einstellung visibility: visible können ausgeblendete Elemente sichtbar gemacht werden.

Deckkraft: 0

img#dice { float: right; margin-left: 2em; opacity: 0; }

Dies ist eine CSS3-Eigenschaft, die dazu führen kann, dass ein Element vollständig wird transparent, um den gleichen Effekt wie opacity: 0 zu erzielen. Der Vorteil von visibility: hidden gegenüber opacity besteht darin, dass es sowohl von visibility als auch von transition verwendet werden kann. animate

Normalerweise können Sie das Attribut

verwenden, um den Fade-Effekt eines Elements zu erzeugen. opacity

Einstellung

macht transparente Elemente sichtbar. opacity:1

Position: absolut

img#dice { position: absolute; left: -1000px; }

Die älteste und gebräuchlichste Methode hierfür besteht darin, das Element durch Setzen auszublenden seine absolute Positionierung. Bei dieser Technik wird das Element aus dem Dokumentfluss herausgenommen, oberhalb des normalen Dokuments, und ein großer

negativer Positionierungswert dafür festgelegt, wodurch das Element außerhalb des sichtbaren Bereichs positioniert wird. Weder left noch float wirken sich auf das margin-Element aus, sodass sie gut ausgeblendet werden können. position: absolute

Die Verwendung dieser Technik ist die beste Möglichkeit, lineare Animationen einiger Elemente zu erstellen.

Um ein Element wieder sichtbar zu machen, erhöhen Sie den Wert von

, damit das Element auf dem Bildschirm erscheint. left

Anzeige: keine

img#dice { display: none; }

ist auch eine sehr alte Technologie, es ist display: none und Als Kompromiss mit position: absolute wird das Element unsichtbar und nimmt keinen Platz mehr im Dokument ein. visibility: hidden; 

ist sehr nützlich, wenn Sie einen Akkordeoneffekt erzeugen. display: none

Setzen Sie das Element auf

oder einen anderen Wert, um das Element wieder sichtbar zu machen. display: block

Zusätzlich zu den 4 oben beschriebenen Methoden gibt es noch weitere Möglichkeiten, Elemente auszublenden, insbesondere bei Verwendung von CSS3. Beispiel: Sie können das Attribut

verwenden, um die Größe eines Elements zu reduzieren, bis es verschwindet. Aber das Attribut scale ist dasselbe wie scale und opacity: 0, unsichtbare Elemente nehmen Platz im Dokument ein. visibility: hidden

Verwandte Empfehlungen:

Wie können HtmL-Elemente ausgeblendet werden?

Javascript steuert HTML-Elemente zum Anzeigen/Ausblenden von Implementierungscode_Javascript-Tipps

Das obige ist der detaillierte Inhalt vonWie verstecke ich HTML-Elemente mit CSS? Vier Möglichkeiten, HTML-Elemente auszublenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!