Welche Möglichkeiten gibt es, Elemente in CSS auszublenden?

Methode: 1. Setzen Sie die Anweisung „display:none“; 3. Setzen Sie die Anweisung „opacity:0“; „position:absolute“ ;top:-9999px;“-Anweisung.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So verstecken Sie Elemente in CSS

display:none

Das Festlegen der Anzeige eines Elements auf „Keine“ ist die am häufigsten verwendete Methode zum Ausblenden von Elementen.

.hide {
    display:none;
}

Nachdem das Element auf display:none gesetzt wurde, verschwindet das Element vollständig auf der Seite und der ursprünglich vom Element belegte Platz wird von anderen Elementen belegt, was bedeutet, dass der Browser neu fließt und neu gezeichnet wird.

Visibility: Hidden

Das Setzen der Sichtbarkeit eines Elements auf Hidden ist auch eine gängige Methode zum Ausblenden von Elementen. Der Unterschied zu display:none besteht darin, dass der Platz, den es einnimmt, weiterhin erhalten bleibt, nachdem das Element von der Seite verschwindet Es führt nur dazu, dass der Browser neu gezeichnet wird, ohne dass ein Reflow erfolgt.

.hidden{
   visibility:hidden
}

visibility:hidden eignet sich für Szenarien, in denen Sie nicht möchten, dass sich das Seitenlayout ändert, nachdem das Element ausgeblendet wurde.

opacity:0

opacity-Attribut Ich glaube, jeder weiß, dass es die Transparenz des Elements und danach darstellt Setzen Sie die Transparenz des Elements auf 0. In den Augen unserer Benutzer werden Elemente auch ausgeblendet.

.transparent {
     opacity:0;
}

Eine Gemeinsamkeit zwischen dieser Methode und „visibility:hidden“ besteht darin, dass das Element nach dem Ausblenden immer noch Platz einnimmt. Wir alle wissen jedoch, dass das Element nach dem Setzen der Transparenz auf 0 einfach unsichtbar ist und immer noch auf der Seite vorhanden ist .

Setzen Sie die Attribute des Boxmodells wie Höhe und Breite auf 0

Dies ist eine ziemlich seltsame Technik, die ich zusammengefasst habe. Einfach ausgedrückt besteht sie darin, die Attribute des Elements wie Rand, Rand, Abstand, Höhe und Breite festzulegen, die sich auswirken das Element-Box-Modell auf 0. Wenn das Element Unterelemente oder Inhalte enthält, sollten Sie auch dessen Overflow:hidden festlegen, um seine Unterelemente auszublenden.

.hiddenBox {
    margin:0;
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

Diese Methode ist nicht praktikabel und kann einige Probleme mit sich bringen. Einige Seiteneffekte, die wir normalerweise verwenden, können jedoch auf diese Weise vervollständigt werden, z. B. die slideUp-Animation von jquery, die den Überlauf des Elements einstellt: und dann über einen Timer kontinuierlich die Höhe und den Rand des Elements festlegt. top, border-bottom, padding-top, padding-bottom sind 0, wodurch der slideUp-Effekt erzielt wird.

Position: absolut, setzt das Element auf Ausblenden

span{
	position: absolute;
	top: -9999px;
   	left: -9999px;
}

Position: absolut, das Hauptprinzip beim Festlegen des Elements auf Ausblenden besteht darin, den oberen und linken Rand des Elements auf einen ausreichend großen negativen Wert zu setzen, um es unsichtbar zu machen den Bildschirm.

Empfohlenes Lernen: „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Elemente in CSS auszublenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!