Was ist der Unterschied zwischen „display:none' und „visibility:hidden'?-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Was ist der Unterschied zwischen „display:none' und „visibility:hidden'?

hzc

Jun 28, 2020 am 10:52 AM

display

Der Unterschied zwischen [display:none] und [visibility:hidden] ist: 1. Ersteres reserviert seinen physischen Platz nicht für versteckte Objekte, während letzteres seinen physischen Platz für versteckte Objekte reserviert. 2. Das früher Die Struktur wird erst geladen, wenn der Wert zum Block wird, und dieser wird bereits geladen, wenn die Seite geladen wird.

Was ist der Unterschied zwischen „display:none' und „visibility:hidden'?

display:none Reserviert keinen physischen Raum für versteckte Objekte.

visibility：hidden Reserviert seinen physischen Raum für versteckte Objekte. Das Physische Leerzeichen ist display:;

. Wenn sein Wert block wird, wird die Struktur geladen, in der es sich befindet.

und visibility werden geladen, wenn die Seite geladen wird, denn wenn ihr Wert hidden ist, ist der von ihr belegte Platz immer noch vorhanden.

Nach der Verwendung des CSS-Attributs display:none gehen die Breite, Höhe und andere Attributwerte des HTML-Elements (Objekts) „verloren“

und nach der Sichtbarkeit :hidden-Attribut verwendet wird, ist das HTML-Element (das Objekt) nur optisch unsichtbar (völlig transparent), aber die räumliche Position, die es einnimmt, bleibt bestehen

Empfohlenes Tutorial: „CSS-Tutorial“

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen „display:none' und „visibility:hidden'?. 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

Verwandter Artikel

Schnellschluck -Cache -BustingApr 18, 2025 am 11:23 AM

Sie sollten auf jeden Fall weitausgestellte Cache-Header auf Ihren Vermögenswerten wie CSS und JavaScript (und Bilder und Schriftarten und was auch immer) festlegen. Das sagt dem Browser

Auf der Suche nach einem Stapel, der die Qualität und Komplexität von CSS überwachtApr 18, 2025 am 11:22 AM

Viele Entwickler schreiben darüber, wie sie eine CSS -Codebasis pflegen können, aber nicht viele von ihnen schreiben darüber, wie sie die Qualität dieser Codebasis messen. Sicher, wir haben

Datalist dient dazu, Werte vorzuschlagen, ohne Werte durchzusetzenApr 18, 2025 am 11:08 AM

Haben Sie jemals ein Formular gehabt, das ein kurzes, willkürliches Stück Text akzeptieren musste? Wie ein Name oder was auch immer. Das ist genau das, wofür es ist. Es gibt viele

Frontkonferenz in ZürichApr 18, 2025 am 11:03 AM

Ich bin so aufgeregt, nach Zürich, der Schweiz, zur Frontkonferenz zu gehen (liebe diesen Namen und diese URL!). Ich war noch nie in der Schweiz, also bin ich aufgeregt

Erstellen einer serverlosen Full-Stack-Anwendung mit Cloudflare-MitarbeiternApr 18, 2025 am 10:58 AM

Eine meiner Lieblingsentwicklungen in der Softwareentwicklung war das Aufkommen von Serverless. Als Entwickler, der die Tendenz hat, sich in den Details festzuhalten

Erstellen dynamischer Routen in einer Nuxt -AnwendungApr 18, 2025 am 10:53 AM

In diesem Beitrag werden wir eine E -Commerce -Store -Demo verwenden, die ich für Netlify erstellt und bereitgestellt habe, um zu zeigen, wie wir dynamische Routen für eingehende Daten erstellen können. Es ist fair

Gestaffelte CSS -ÜbergängeApr 18, 2025 am 10:46 AM

Lassen Sie sich sagen, Sie wollten ein Element auf einen unterhaltsamen visuellen Effekt verschieben.

Verwendung von Immer für React State ManagementApr 18, 2025 am 10:41 AM

Wir nutzen den Zustand, um Anwendungsdaten zu verfolgen. Zustände ändern sich, wenn Benutzer mit einer Anwendung interagieren. In diesem Fall müssen wir den Status aktualisieren

See all articles