So platzieren Sie versteckte Elemente in CSS-CSS-Tutorial-php.cn

So platzieren Sie versteckte Elemente in CSS

青灯夜游

Freigeben： 2023-01-05 16:12:29

Original

7191 Leute haben es durchsucht

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.

So platzieren Sie versteckte Elemente in CSS

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>

Nach dem Login kopieren

So platzieren Sie versteckte Elemente in CSS

方法2：使用opacity: 0

visibility auszublenden und anzugeben, 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. Die Wertereduzierung wird in Tabellen verwendet, um Spalten oder Zeilen aus dem Tabellenlayout zu entfernen.

Beispiel:

<!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>

Nach dem Login kopieren

So platzieren Sie versteckte Elemente in CSS

Methode 2: Verwenden Sie opacity: 0, um den Platzhalter auszublenden

Das 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!