So verbergen Sie Elemente mit CSS

CSS (Cascading Style Sheets) ist eine Sprache, die zum Entwerfen von Webseiten und zum Hinzufügen von Stilen zu Elementen verwendet wird. Eine der enthaltenen Funktionen ist das Ausblenden von Elementen. Dadurch wird ein Element im Weblayout ausgeblendet, die Position und Größe des Elements bleibt jedoch erhalten. In diesem Artikel besprechen wir, wie man Elemente mithilfe von CSS ausblendet.

1. display:none

Verwenden Sie das Attribut display:none, um ein Element vollständig auszublenden und aus dem Layout zu entfernen. Auch wenn das Element Platz beansprucht, wird es nicht gerendert. Diese Methode eignet sich, wenn Sie Inhalte ausblenden müssen, damit sie unter bestimmten Bedingungen sofort angezeigt werden können. Es kann auf jedes Element angewendet werden, einschließlich Divs, Absätze, Bilder, Listen usw.

Zum Beispiel möchten wir ein div-Element ausblenden und bei Bedarf anzeigen:

HTML:

<div class="hide-me">这是要隐藏的元素。</div>

CSS:

.hide-me {
  display: none;
}

Im obigen CSS-Code ist .hide-me der Klassenname und alle Elemente, die diese Klasse verwenden wird ausgeblendet.

2. Sichtbarkeit: versteckt

Das Sichtbarkeitsattribut kann ein Element verbergen, aber das Element behält weiterhin seinen Platz und seine Position und kann andere Elemente überlappen. Diese Methode eignet sich für Situationen, in denen Sie den Platz und die Position eines ausgeblendeten Elements beibehalten müssen. Es kann auf jedes Element angewendet werden, einschließlich Divs, Absätze, Bilder, Listen usw.

Zum Beispiel möchten wir ein div-Element ausblenden und bei Bedarf anzeigen:

HTML:

<div class="hide-me">这是要隐藏的元素。</div>

CSS:

.hide-me {
  visibility: hidden;
}

Im obigen CSS-Code ist .hide-me der Klassenname und alle Elemente, die diesen verwenden Klasse werden ausgeblendet.

3. opacity:0

Die opacity-Eigenschaft macht ein Element vollständig transparent, behält aber seinen Raum und seine Position bei und kann andere Elemente überlappen. Diese Methode eignet sich für Situationen, in denen Sie ein Element vorübergehend ausblenden und bei Bedarf sofort anzeigen müssen.

Zum Beispiel möchten wir ein div-Element ausblenden und bei Bedarf anzeigen:

HTML:

<div class="hide-me">这是要隐藏的元素。</div>

CSS:

.hide-me {
  opacity: 0;
}

Im obigen CSS-Code ist .hide-me der Klassenname und alle Elemente, die diesen verwenden Klasse wird transparent und unsichtbar.

4. height:0; width:0

Wenn Sie ein Bild ausblenden möchten, können Sie das Attribut height:0; width:0 verwenden, damit die Bildgröße auf Null gesetzt wird. Diese Methode wird häufig verwendet, um kleine Symbole oder Schaltflächen auszublenden, anstatt das gesamte Element auszublenden. Wenn Sie beispielsweise ein Bild ausblenden möchten:

HTML:

<img class="hide-me" src="example.jpg" alt="image">

CSS:

.hide-me {
  height: 0;
  width: 0;
}

Im obigen CSS-Code ist .hide-me der Klassenname, und Bilder, die diese Klasse verwenden, werden nicht sichtbar sein.

Zusammenfassung:

Wenn Sie CSS zum Ausblenden von Elementen verwenden, können Sie je nach Bedarf verschiedene Methoden auswählen. Wenn Sie das Element vollständig ausblenden und Platz dafür schaffen möchten, verwenden Sie display: none; wenn Sie das Element ausblenden, aber seinen Platz behalten möchten, verwenden Sie „visibility: hide“, wenn Sie das Element bei Bedarf sofort anzeigen möchten, verwenden Sie opacity: 0 und height: 0; width:0 Attribut. Für welche Methode Sie sich auch entscheiden, Sie können unerwünschte Elemente aus Ihrem Layout ausblenden und bei Bedarf sofort anzeigen.

Das obige ist der detaillierte Inhalt vonSo verbergen Sie Elemente mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!