Heim > Artikel > Web-Frontend > So platzieren Sie versteckte Elemente in CSS
So platzieren Sie versteckte Elemente in CSS
- 青灯夜游Original
- 2021-04-28 16:03:257173Durchsuche
So verstecken Sie Elemente mithilfe von CSS-Platzhaltern: 1. Verwenden Sie das Sichtbarkeitsattribut und legen Sie den Stil „visibility:hidden;“ fest. Obwohl das Element ausgeblendet ist, nimmt es immer noch seinen ursprünglichen Platz ein Legen Sie das Element „opacity:0;“ fest.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Methode 1: Verwenden Sie visibility: versteckt;, um das Platzhalterattribut visibility: hidden;隐藏占位
visibility 属性规定元素是否可见。
这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--visibility: hidden</title>
<style>
.visibility{
visibility: hidden;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="visibility">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>
方法2：使用opacity: 0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--opacity: 0</title>
<style>
.opacity{
opacity: 0;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="opacity">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>
opacity: 0, um den Platzhalter auszublendenDas 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. 🎜🎜Beispiel: 🎜rrreee🎜🎜🎜🎜 (Lernvideo-Sharing: 🎜CSS-Video-Tutorial🎜)🎜Das obige ist der detaillierte Inhalt vonSo platzieren Sie versteckte Elemente in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!