Heim  >  Artikel  >  Web-Frontend  >  Was ist der Unterschied zwischen display:hidden und display:none in CSS?

Was ist der Unterschied zwischen display:hidden und display:none in CSS?

王林
王林Original
2020-11-19 10:48:5410325Durchsuche

Der Unterschied zwischen display:hidden und display:none in CSS ist: 1. [display:none] bedeutet, dass es nicht existiert und nicht geladen wird und seinen physischen Platz nicht für das versteckte Objekt reserviert. 2. [display: versteckt] bedeutet, dass es ausgeblendet ist, aber die Position beim Durchsuchen beibehalten wird und Objekte auf der Webseite nicht sichtbar sind. Differenzanalyse:

Was ist der Unterschied zwischen display:hidden und display:none in CSS? .

visibility:hiddenAusblenden, aber beim Durchsuchen die Position beibehalten. Auch wenn das Objekt auf der Webseite nicht sichtbar ist, ändert sich der vom Objekt eingenommene Platz auf der Webseite nicht. (Lernvideo-Sharing:

CSS-Video-Tutorial

)display:none视为不存在且不加载,即不为被隐藏的对象保留其物理空间,该对象在页面上彻底消失。

visibility:hidden

Nach der Verwendung des display:none-Attributs gehen die Breite, Höhe und andere Attributwerte des HTML-Elements (Objekts) „verloren“; Mit dem Attribut „visibility:hidden“ ist das HTML-Element (Objekt) nur optisch unsichtbar (völlig transparent), während die räumliche Position, die es einnimmt, weiterhin vorhanden ist. Das heißt, es verfügt weiterhin über Attributwerte wie Höhe und Breite.

Beispiel:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table id="table1" style="border: 2px dashed red;background-color: #e2e2e2;padding: 5px">
        <tr>
            <td>A1
            </td>
            <td>A2
            </td>
        </tr>
        <tr>
            <td>B1
            </td>
            <td>B2
            </td>
        </tr>
    </table>
</body>
</html>

Effekt:


Style="display:none" zum tr in der zweiten Zeile der Tabelle hinzufügen:

Was ist der Unterschied zwischen display:hidden und display:none in CSS?

Style=" zum tr in der zweiten Zeile hinzufügen der Tabellensichtbarkeit: ausgeblendet":

Was ist der Unterschied zwischen display:hidden und display:none in CSS?

Verwandte Empfehlungen:

CSS-Tutorial

Was ist der Unterschied zwischen display:hidden und display:none in CSS?

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen display:hidden und display:none in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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