Heim > Web-Frontend > CSS-Tutorial > So verbergen Sie Elemente, behalten aber ihre Position im CSS bei

So verbergen Sie Elemente, behalten aber ihre Position im CSS bei

青灯夜游
Freigeben: 2021-05-13 14:38:55
Original
5717 Leute haben es durchsucht

In CSS können Sie das Sichtbarkeitsattribut verwenden, um die Elementposition beizubehalten. Sie müssen nur den Stil „visibility:hidden;“ auf diese Weise festlegen, das Element wird jedoch nicht ausgeblendet Verschwinden und belegen immer noch Platz. Nach dem Ausblenden wird der ursprüngliche HTML-Stil nicht geändert.

So verbergen Sie Elemente, behalten aber ihre Position im CSS bei

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

css verbirgt Elemente, behält aber ihre Position bei

<!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>
Nach dem Login kopieren

Rendering:

So verbergen Sie Elemente, behalten aber ihre Position im CSS bei

Das Sichtbarkeitsattribut gibt an, 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.

Verwenden Sie visibility: hidden,元素会被隐藏,但是不会消失,依然占据空间,隐藏后不会改变html原有样式;会被子孙继承,子孙也可以通过显示的设置visibility: visible;, um das an das Element gebundene Ereignis einzublenden. Das dynamische Ändern dieses Attributs führt zu einer Neuzeichnung.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo verbergen Sie Elemente, behalten aber ihre Position im CSS bei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage