So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen-Front-End-Fragen und Antworten-php.cn

So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen

青灯夜游

Freigeben： 2022-06-01 19:34:40

Original

5180 Leute haben es durchsucht

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.

So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen

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>

Nach dem Login kopieren

So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen

说明：

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>

Nach dem Login kopieren

So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen Beschreibung:

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.

Methode 2: Verwenden Sie die Positions- und Top-Attribute🎜🎜🎜Fügen Sie einfach den Stil 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!