So verstecken Sie Elemente, ohne Platz im CSS zu beanspruchen-CSS-Tutorial-php.cn

So verstecken Sie Elemente, ohne Platz im CSS zu beanspruchen

青灯夜游

Freigeben： 2023-01-05 16:13:23

Original

8121 Leute haben es durchsucht

So verbergen Sie Elemente, ohne Platz in CSS zu beanspruchen: 1. Verwenden Sie das Anzeigeattribut und fügen Sie dem Element den Stil „display:none;“ hinzu. 2. Verwenden Sie die absolute Positionierung und fügen Sie dem Element den Stil „position:absolute;top:-9999px;“ hinzu.

So verstecken Sie Elemente, ohne Platz im CSS zu beanspruchen

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

1. Verwenden Sie display:none, um Elemente auszublenden, ohne Platz zu belegen.

display:none kann Elemente ausblenden, ohne Platz zu belegen. Daher führt eine dynamische Änderung dieses Attributs zu einer Neuanordnung (Änderung des Seitenlayouts). Dies kann so verstanden werden, dass das Element von der Seite gelöscht wird. Es wird nicht von Nachkommen geerbt, aber seine Nachkommen werden nicht angezeigt. Schließlich sind sie alle zusammen ausgeblendet. display:none可以不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样；不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>不占位隐藏元素--display:none</title>
        <style>
            .display{
                display:none;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="display">隐藏元素</div>
        <div>正常显示元素</div>

    </body>
</html>

Nach dem Login kopieren

效果图：

So verstecken Sie Elemente, ohne Platz im CSS zu beanspruchen

方法2：使用position: absolute;top: -9999px;Beispiel:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>不占位隐藏元素--position: absolute</title>
		<style>
			.position {
				position: absolute;
				top: -9999px;
			}
		</style>
	</head>

	<body>
		<div>正常显示元素</div>
		<div class="position">隐藏元素</div>
		<div>正常显示元素</div>

	</body>

</html>

Nach dem Login kopieren

Rendering:

Methode 2: Verwenden Sie position: absolute;top: -9999px;, um Elemente auszublenden, ohne die Position einzunehmen.

So verstecken Sie Elemente, ohne Platz im CSS zu beanspruchen

position: absolute Das Hauptprinzip zum Festlegen des Ausblendens von Elementen Wird die Oberseite des Elements auf einen ausreichend großen negativen Wert gesetzt, wird es auf dem Bildschirm unsichtbar.

Beispiel: rrreee

Rendering: 🎜🎜🎜🎜🎜🎜 (Lernvideo-Sharing: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonSo verstecken Sie Elemente, ohne Platz im CSS zu beanspruchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!