CSS zum Implementieren des Versteckens

CSS (Cascading Style Sheets) ist eine Sprache zur Steuerung des Stils und Layouts von Webseiten. Beim Erstellen von Webseiten müssen wir häufig CSS verwenden, um die Stile von Elementen wie Schriftarten, Hintergrundfarben, Rahmen usw. zu definieren. Es gibt auch ein magisches Attribut in CSS – display, das den Anzeigemodus von Elementen steuern kann, einschließlich des Ausblendens.

Warum müssen Sie Elemente ausblenden? Es gibt viele Szenen. Wenn wir beispielsweise eine Seite mit mehreren Registerkarten erstellen, möchten wir möglicherweise nur den Inhalt der aktuell ausgewählten Registerkarte anzeigen und zuerst den Inhalt anderer Registerkarten ausblenden. Als weiteres Beispiel müssen wir der Seite möglicherweise eine Schließen-Schaltfläche hinzufügen, die ein Element ausblenden kann, wenn darauf geklickt wird usw.

Als nächstes werden wir verschiedene Methoden zum Ausblenden von Elementen in CSS im Detail vorstellen.

1. Anzeigeattribut

display ist das am häufigsten verwendete Attribut in CSS, um den Anzeigemodus von Elementen zu steuern. Standardmäßig werden alle Elemente angezeigt. Wenn Sie ein Element ausblenden möchten, können Sie dies tun, indem Sie das Anzeigeattribut ändern. Im Folgenden sind mehrere Werte für das Anzeigeattribut aufgeführt:

1. none

Verstecken Sie das Element und entfernen Sie es aus dem Dokumentenfluss, das heißt, es nimmt keinen Platz ein. Dadurch haben versteckte Elemente keinen Einfluss mehr auf das Seitenlayout.

Beispielcode:

.hide {
  display: none;
}

2. block

Konvertieren Sie Elemente in Elemente auf Blockebene und zeigen Sie sie an. Ein Element auf Blockebene belegt eine eigene Zeile, hat eine festgelegte Breite und Höhe und kann andere Elemente auf Blockebene und Inline-Elemente aufnehmen.

Beispielcode:

.show {
  display: block;
}

3. inline

Konvertieren Sie Elemente in Inline-Elemente und zeigen Sie sie an. Inline-Elemente belegen keine einzelne Zeile. Breite und Höhe werden durch den Inhalt bestimmt und können nur andere Inline-Elemente aufnehmen.

Beispielcode:

.show {
  display: inline;
}

4. inline-block

Konvertieren Sie Elemente in Inline-Elemente auf Blockebene und zeigen Sie sie an. Inline-Elemente auf Blockebene weisen die Eigenschaften auf, dass Elemente auf Blockebene die Breite und Höhe festlegen können und Inline-Elemente andere Inline-Elemente aufnehmen können.

Beispielcode:

.show {
  display: inline-block;
}

2. Sichtbarkeitsattribut

Das Sichtbarkeitsattribut kann auch verwendet werden, um den Anzeigemodus von Elementen zu steuern. Anders als bei der Anzeige nimmt das Element nach der Verwendung der Sichtbarkeit zum Ausblenden eines Elements immer noch Platz ein, wird jedoch nicht mehr angezeigt. Im Folgenden sind mehrere Werte für das Sichtbarkeitsattribut aufgeführt:

1. visible

Das Element ist sichtbar und wird entsprechend der Positionierungsmethode angezeigt.

2. versteckt

Das Element ist unsichtbar, nimmt aber dennoch Platz ein. Im Gegensatz zu display:none sind Breite und Höhe des Elements weiterhin gültig.

3. collapse

Bei Tabellenelementen werden der Rand und der Abstand des Elements ignoriert, sodass die Tabellenzeile so aussieht, als gäbe es keine Tabelle.

Beispielcode:

.hide {
  visibility: hidden;
}

3. Deckkraftattribut

Das Deckkraftattribut kann den Effekt erzielen, dass Elemente allmählich verschwinden. Der Wert liegt zwischen 0 und 1 und gibt die Transparenz des Elements an.

1. 0

Völlig transparent, das heißt, das Element ist unsichtbar.

2. 1

Vollständig undurchsichtig, das heißt, das Element ist vollständig sichtbar.

3. 0,5

Transluzent, das heißt, das Element ist teilweise sichtbar und teilweise unsichtbar.

Wenn die Transparenz 0 ist, ist das Element nicht nur unsichtbar, sondern nimmt auch keinen Platz ein. Seien Sie jedoch vorsichtig, wenn Sie die Deckkraft zum Ausblenden von Elementen verwenden. Obwohl es verborgen aussieht, ist das Element tatsächlich immer noch vorhanden. Wenn Sie möchten, dass das Element keinen Platz einnimmt und ausgeblendet wird, müssen Sie es mit anderen Methoden wie display:none oder Visibility:hidden kombinieren.

Beispielcode:

.hide {
  opacity: 0;
}

Mit den oben genannten drei Methoden können Elemente ausgeblendet werden, um personalisierte Designanforderungen zu erfüllen. Es ist zu beachten, dass es für Elemente, die heruntergeladen werden können, wie z. B. Bilder, nicht sicher ist, geistige Eigentumsrechte durch Verstecken zu schützen, und dass zum Schutz andere Technologien eingesetzt werden sollten.

Das obige ist der detaillierte Inhalt vonCSS zum Implementieren des Versteckens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!