Heim > Artikel > Web-Frontend > Welche Möglichkeiten gibt es, CSS auszublenden? Was ist der Unterschied zwischen Anzeige: keine, Deckkraft: 0, Sichtbarkeit: ausgeblendet?
Welche Möglichkeiten gibt es, CSS auszublenden? Was ist der Unterschied zwischen Anzeige: keine, Deckkraft: 0, Sichtbarkeit: ausgeblendet?
- yuliaOriginal
- 2018-09-06 18:07:432937Durchsuche
Wenn wir Seiten schreiben, verwenden wir häufig das Verbergen. Welche Versteckmethoden gibt es und was sind ihre Unterschiede?
Sie können den Deckkraftwert auf 0, die Sichtbarkeit auf „Ausgeblendet“ oder die Anzeige auf „Keine“ setzen. Aber jede Methode weist Unterschiede auf, die es uns ermöglichen, in einer bestimmten Situation die richtige Wahl zu treffen. Im folgenden Artikel erfahren Sie, welche Unterschiede es gibt, sodass Sie je nach Anlass die geeignete Methode auswählen können.
1.display: none
Setzen Sie das Anzeigeattribut auf „none“. Mit diesem Attribut belegen ausgeblendete Elemente keinen Platz. Der Effekt dieser Methode ist, als ob das Element überhaupt nicht existiert, und gleichzeitig werden auch die Nachkommen dieses Elements ausgeblendet. Das heißt, das Element verschwindet vollständig von der Seite. Laienhaft ausgedrückt kann es weder gesehen noch berührt werden.
Beispiel: Verwenden Sie den Stil „display:none“, um Elemente auszublenden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{width: 100px;height: 100px;background: red;display: none;}
.a2{width: 100px;height: 100px;background: yellow;}
</style>
</head>
<body>
<div class="a1">have a nice day</div>
<div class="a2">have a nice day</div>
</body>
</html>Rendering:
2. Deckkraft
Dieses Attribut dient dazu, die Deckkraft des Objekts festzulegen, wenn seine Transparenz 0 ist, aber es nimmt immer noch diese Position ein. Für Laien ist es unsichtbar, aber greifbar. Es wirkt sich auch auf das Layout der Webseite aus. Wenn ein Element mit diesem Attribut hinzugefügt wird, ändern sich auch dessen Hintergrund und Elementinhalt entsprechend.
Beispiel: Stil „Opazität: 0“ verwenden, um Elemente auszublenden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{width: 100px;height: 100px;background: red;opacity: 0;}
.a2{width: 100px;height: 100px;background: yellow;}
</style>
</head>
<body>
<div class="a1">have a nice day</div>
<div class="a2">have a nice day</div>
</body>
</html>Rendering:
3. Sichtbarkeit: versteckt
Wenn der Attributwert auf versteckt gesetzt ist, wird das Element ausgeblendet, aber der vom Objekt eingenommene Platz auf der Webseite ändert sich nicht bedeutet, dass es unsichtbar, aber berührbar ist. Und wirkt sich auf das Layout der Webseite aus. Diese Eigenschaft ähnelt der Opazitätseigenschaft, der einzige Unterschied zur Opazität besteht darin, dass sie nicht auf Benutzerinteraktionen reagiert.
Beispiel: Verwenden Sie den Stil „Sichtbarkeit: ausgeblendet“, um Elemente auszublenden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{width: 100px;height: 100px;background: red;visibility: hidden;}
.a2{width: 100px;height: 100px;background: yellow;}
</style>
</head>
<body>
<div class="a1">have a nice day</div>
<div class="a2">have a nice day</div>
</body>
</html>Rendering:
Das Obige stellt 3 vor Typen Die versteckten Methoden unterscheiden sich voneinander. In tatsächlichen Projekten hängt es von der Situation ab, welche verwendet werden sollte.
Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, CSS auszublenden? Was ist der Unterschied zwischen Anzeige: keine, Deckkraft: 0, Sichtbarkeit: ausgeblendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!