Heim > Artikel > Web-Frontend > So verstecken Sie div mit CSS
So verstecken Sie div mit CSS
- 藏色散人Original
- 2021-04-25 09:30:5010582Durchsuche
So verbergen Sie div mit CSS: 1. Verwenden Sie „display:none“, um div auszublenden. 2. Verwenden Sie „visibility:hidden;“, um div auszublenden.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Wenn wir normalerweise die Website gestalten, möchten wir das p ausblenden, aber viele Leute wissen nicht, wie sie die Anzeige und das Ausblenden von p mithilfe von CSS steuern können? Lassen Sie uns erklären, wie man p mit CSS versteckt.
1. Verwenden Sie display:none, um div auszublenden. Wir können das Attribut display:none verwenden, um alle Informationen, einschließlich Text und Bilder, auszublenden. Die Syntax lautet:
dc6dce4a544fdca2df29d5ac0ea9906b这里你是看不到的16b28748ea4df4d9c2150843fecfba68Wenn wir den CSS-Stil in p verwenden Sie können das Attribut display:none verwenden, um den Inhalt auszublenden. Gleichzeitig belegt der ausgeblendete Inhalt keinen Platz. Im Allgemeinen verwenden wir die Verwendung von js-Statistiken Code zum Ausblenden des angezeigten Symbols.
2. Mit „visibility:hidden“ wird das div-Attribut „visibility“ ausgeblendet, das angibt, ob das Element sichtbar ist.
Dieses Attribut gibt an, ob die von einem Element generierte Elementbox angezeigt werden soll. Das bedeutet, dass das Element weiterhin seinen ursprünglichen Platz einnimmt, aber völlig unsichtbar sein kann. Die Wertereduzierung wird in Tabellen verwendet, um Spalten oder Zeilen aus dem Tabellenlayout zu entfernen. Attributwert:
sichtbarer Standardwert. Das Element ist sichtbar.
- versteckte Elemente sind unsichtbar.
- collapse Bei Verwendung in einem Tabellenelement löscht dieser Wert eine Zeile oder Spalte, hat jedoch keinen Einfluss auf das Layout der Tabelle. Der durch Zeilen oder Spalten belegte Platz wird für andere Inhalte zur Verfügung gestellt. Wenn dieser Wert für ein anderes Element verwendet wird, wird er als „versteckt“ dargestellt.
- 3. Verwenden Sie opacity: 0, um das div auszublenden. Das opacity-Attribut bedeutet, die Transparenz eines Elements festzulegen. Es ist nicht dazu gedacht, den Begrenzungsrahmen eines Elements zu ändern. Das bedeutet, dass das Element nur optisch ausgeblendet wird, wenn die Deckkraft auf 0 gesetzt wird. Das Element selbst nimmt weiterhin seine eigene Position ein und trägt zum Layout der Webseite bei. Dies ähnelt der Sichtbarkeit: oben versteckt.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--opacity: 0</title>
<style>
div{
height: 20px;
}
.demo{
width: 800px;
height: 60px;
margin: 50px auto;
border: 1px solid red;
}
.hide,span{
opacity: 0;
}
</style>
</head>
<body>
<div>
<div sty>元素隐藏1--opacity: 0</div>
<div>元素隐藏2--opacity: 0</div>
<div>元素隐藏3--opacity: 0</div>
</div>
<div>
<div>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</div>
<div>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</div>
</div>
</body>
</html>Rendering:
[Empfohlenes Lernen:
CSS-Video-Tutorial]
Das obige ist der detaillierte Inhalt vonSo verstecken Sie div mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!