Heim > Artikel > Web-Frontend > So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
- 青灯夜游Original
- 2022-06-01 19:15:405151Durchsuche
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Zwei Möglichkeiten, Elemente in CSS auszublenden, ohne Platz zu beanspruchen
Methode 1: Verwenden Sie das Anzeigeattribut
Stellen Sie einfach den display:none;-Stil auf das Element eindisplay:none;样式即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.display{
display:none;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="display">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>
说明：
display:none可以不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样；不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。
方法2：利用position和top属性
只需给元素添加position: absolute;top: -9999px;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.position{
position: absolute;
top: -9999px;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="position">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>
display:none kann das Element ausblenden, ohne Platz zu belegen, daher führt eine dynamische Änderung dieses Attributs zu einer Neuanordnung (Änderung des Seitenlayouts), was als Löschen des Elements von der Seite verstanden werden kann werden nicht an Nachkommen vererbt, aber ihre Nachkommen werden nicht angezeigt. Schließlich sind sie alle zusammen verborgen.
position: absolute;top: -9999px; zum Element hinzu🎜rrreee🎜🎜🎜🎜Anleitung:🎜🎜Dieser Typ Die Methode besteht darin, das Element außerhalb des Dokumentflusses zu positionieren (ohne Platz zu beanspruchen), indem man sich entscheidet, es zu positionieren, und dann den oberen Rand des Elements auf einen ausreichend großen negativen Wert setzt, um es auf dem Bildschirm unsichtbar zu machen. 🎜Das obige ist der detaillierte Inhalt vonSo verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!