CSS verstecken und anzeigen

Im Webdesign ist das Ausblenden und Anzeigen von Elementen ein sehr häufiges Bedürfnis. Um Elemente ein- und auszublenden, verwenden wir normalerweise die CSS-Anzeigeeigenschaft. In diesem Artikel werden die häufig verwendeten Methoden zum Ausblenden und Anzeigen in CSS vorgestellt.

1. Anzeigeattribut in CSS

Das Anzeigeattribut ist eines der am häufigsten verwendeten Attribute in CSS. Es kann die Anzeige oder das Ausblenden von Elementen steuern und auch den Ausdruck von Elementen ändern. Das Anzeigeattribut hat viele Werte. Hier stellen wir nur einige häufig verwendete Werte vor.

1. display:none

display:none ist die am häufigsten verwendete Methode zum Ausblenden von Elementen. Sie entfernt das Element vollständig aus dem Dokumentenfluss und belegt keinen Platz. Selbst wenn Sie den HTML-Code des Elements in einem Browser anzeigen, können Sie das ausgeblendete Element nicht sehen. Der Vorteil der Verwendung von display:none besteht darin, dass das Element ausgeblendet werden kann, ohne das Layout zu ändern, und dass das Element keinen Platz beansprucht.

Zum Beispiel können wir den folgenden CSS-Code verwenden, um ein Element auszublenden:

div {
  display: none;
}

2. display:block

display:block ist die am häufigsten verwendete Methode zum Anzeigen von Elementen. Das Blockelement beginnt in einer neuen Zeile und nimmt die gesamte Breite des übergeordneten Elements ein. Es kann die Breite und Höhe festlegen und standardmäßig Inline-Elemente und Textknoten aufnehmen.

Zum Beispiel setzt der folgende CSS-Code das div-Element auf ein Blockelement:

div {
  display: block;
}

3. display: inline

display: inline sorgt dafür, dass das Element inline angezeigt wird und als benachbarte Elemente erscheint. Es beginnt keine neue Zeile vor oder nach dem Text, sondern teilt sich eine Zeile mit anderen Elementen. Es legt die Breite und Höhe des Elements fest, umschließt es jedoch nicht automatisch.

Zum Beispiel können wir den folgenden CSS-Code verwenden, um das span-Element auf ein Inline-Element festzulegen:

span {
  display: inline;
}

4. display: inline-block

display: inline-block soll dafür sorgen, dass das Element einige Funktionen von inline ( Das Element startet nicht erneut) (eine Zeile) und weist einige Blockeigenschaften auf (Breite und Höhe können eingestellt werden) und wird häufig verwendet, um einige Layouteffekte zu erzielen, z. B. den Effekt gemischter Grafiken und Texte.

Zum Beispiel können wir den folgenden CSS-Code verwenden, um das div-Element auf ein Inline-Block-Element festzulegen:

div {
  display: inline-block;
}

2. Das Sichtbarkeitsattribut in CSS

Neben dem Anzeigeattribut gibt es auch ein häufig verwendetes Attribut das Elemente ein- und ausblenden kann, das ist das Sichtbarkeitsattribut. Das Sichtbarkeitsattribut dient zur Steuerung der Sichtbarkeit eines Elements und kann auf zwei Werte gesetzt werden: sichtbar (Standardwert, Element ist sichtbar) und versteckt (Element ist ausgeblendet).

1. sichtbarkeit: sichtbar

sichtbarkeit: sichtbar ist der Standardwert, also der Wert, der das Element sichtbar macht. Dies ist dem Fall von display:block oder display:inline sehr ähnlich. Elemente mit Visibility: Visible behalten jedoch ihre Position im Dokument bei und werden nicht vom CSS-Layout beeinflusst, wie Elemente mit Display:Block oder Display:Inline. Selbst wenn ein Element ausgeblendet ist, können Sie mithilfe von JavaScript oder anderen Techniken die Position und Größe des Elements ermitteln.

Zum Beispiel setzt der folgende CSS-Code ein div-Element in einen sichtbaren Zustand:

div {
  visibility: visible;
}

2. visibility: versteckt

visibility: versteckt ist der Wert, der das Element verbirgt. Dies hat den gleichen Effekt wie display:none, entfernt jedoch nicht das Element aus dem Dokumentfluss, sondern behält den Platz des Elements bei. Wenn also ein Element ausgeblendet ist, nehmen andere Elemente seine Position ein und von dem Element ausgelöste Ereignisse und Animationen funktionieren weiterhin.

Zum Beispiel setzt der folgende CSS-Code das div-Element in einen unsichtbaren Zustand:

div {
  visibility: hidden;
}

3 Das Opazitätsattribut in CSS

Zusätzlich zur Verwendung der Anzeige- und Sichtbarkeitsattribute zum Ein- und Ausblenden von Elementen können Sie auch das verwenden opacity-Attribut zum Anpassen der Elementtransparenz.

1. opacity: 1 (Opacity)

opacity: 1 ist der Standardwert des Elements, was bedeutet, dass das Element vollständig undurchsichtig ist, d. h. kein nachfolgender Inhalt durch das Element sichtbar ist.

Zum Beispiel legt der folgende CSS-Code ein undurchsichtiges div-Element fest:

div {
  opacity: 1;
}

2. opacity: 0 (vollständig transparent)

opacity: 0 bedeutet, dass das Element vollständig transparent ist, d. h. der Hintergrund vollständig durch das Element hindurchscheint . In der Praxis wird opacity: 0 häufig verwendet, um Elemente auszublenden und den Footprint des Elements beizubehalten.

Der folgende CSS-Code legt beispielsweise ein vollständig transparentes div-Element fest:

div {
  opacity: 0;
}

3. Opazität: 0,5 (halbtransparent)

Opazität: 0,5 bedeutet, dass das Element halbtransparent ist, d. h. der Hintergrund sichtbar ist durch das Element, aber immer noch Der Inhalt des Elements ist sichtbar.

Zum Beispiel legt der folgende CSS-Code ein durchscheinendes div-Element fest:

div {
  opacity: 0.5;
}

Zusammenfassung

In diesem Artikel werden gängige Methoden zum Ausblenden und Anzeigen in CSS vorgestellt, einschließlich der Anzeige- und Sichtbarkeitseigenschaften sowie der Deckkrafteigenschaft. In der tatsächlichen Entwicklung können wir je nach Bedarf verschiedene Methoden zum Ausblenden und Anzeigen von Elementen auswählen. Ich hoffe, dieser Artikel kann für Sie hilfreich sein.

Das obige ist der detaillierte Inhalt vonCSS verstecken und anzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!