CSS-Eigenschaften: Anzeige und Sichtbarkeit

Was ist der Unterschied zwischen den Eigenschaften “Anzeige” und “Sichtbarkeit”?

Solutions Collecting From Web of "CSS-Eigenschaften: Anzeige und Sichtbarkeit"

Die visibility teilt dem Browser nur mit, ob ein Element angezeigt werden soll oder nicht. Es ist entweder sichtbar ( visible – Sie können es sehen), oder unsichtbar ( hidden – Sie können es nicht sehen).

Die Eigenschaft display teilt dem Browser mit, wie ein Element gezeichnet oder dargestellt werden soll – ob es als inline Element (dh mit Text und anderen Inline-Elementen) oder als block Level-Element (Höhe und Wide-Eigenschaften, die Sie festlegen können, ist es floatable, etc), oder ein inline-block (dh es fungiert wie eine Block-Box, sondern ist inline gelegt) und einige andere ( list-item , table , table-row , table-cell , flex usw.).

Wenn Sie ein Element für die display: block festlegen display: block aber auch visibility: hidden , wird es vom Browser weiterhin als Blockelement behandelt, mit der Ausnahme, dass Sie es nicht sehen. So ähnlich stapelt man eine rote Box auf eine unsichtbare Box: Die rote Box sieht aus, als würde sie in der Luft schweben, während sie in Wirklichkeit auf einer physischen Box sitzt, die man nicht sehen kann.

Mit anderen Worten, das bedeutet, dass Elemente mit einer display , die none sind, den Fluss von Elementen auf einer Seite beeinflussen, unabhängig davon, ob sie sichtbar sind oder nicht. Felder, die ein Element mit display: none verhält sich so, als wäre dieses Element nie vorhanden (obwohl es im DOM verbleibt).

Sichtbarkeit: versteckt;

  • Das Element wird nicht gemalt und erhält keine Click / Touch-Ereignisse, aber der benötigte Platz ist noch belegt
  • Da es immer noch für Layoutzwecke vorhanden ist, können Sie es messen, ohne dass es sichtbar ist
  • Das Ändern von Inhalten kostet immer noch Zeit, um die Seite neu zu gestalten
  • Die Sichtbarkeit wird vererbt. Dies bedeutet, dass Sie Unterkinder sichtbar machen können, indem Sie ihnen Sichtbarkeit geben: sichtbar;

Anzeige: keine;

  • bewirkt, dass das Element nicht am Ablauf / Layout teilnimmt
  • kann (je nach verwendetem Browser) Flash-Filme und iFrames (die bei erneuter Wiedergabe neu gestartet / neu geladen werden) beenden, obwohl Sie dies mit Iframes verhindern können
  • das Element wird keinen Platz einnehmen. Für Layout-Zwecke ist es so, als ob es nicht existiert
  • Einige Browser / Geräte (z. B. das iPad) nehmen den von diesem Element verwendeten Speicher direkt zurück und verursachen kleine Fehler, wenn Sie während der Animationen zwischen keinen und einem anderen Wert wechseln

zusätzliche Anmerkungen:

  • Bilder in versteckten Inhalten: In allen gängigen Browsern werden Bilder immer noch geladen, obwohl sie sich in jedem Element mit Sichtbarkeit befinden: versteckt; oder Anzeige: keine;
  • fonts in ausgeblendetem Inhalt: Webkit-Browser (Chrome / Safari) können das Laden von benutzerdefinierten fonts verzögern, die nur in versteckten Elementen verwendet werden, z. B. durch Sichtbarkeit oder Anzeige. Dies kann dazu führen, dass Sie Elemente messen, die noch eine Fallback-Schriftart verwenden, bis die benutzerdefinierte Schriftart geladen ist.

display: none entfernt das Element aus dem Fluss des HTML, während visibility: hidden nicht.

Anzeige: keine; Entfernt den visuellen Stil / physischen Raum des DOM-Elements aus dem DOM, während visibility: hidden; entfernt das Element nicht, sondern versteckt es einfach. Ein div, das 300 px des vertikalen Speicherplatzes in Ihrem DOM belegt, belegt weiterhin 300 px der vertikalen Breite, wenn es auf visibility eingestellt ist: hidden; aber wenn eingestellt, um anzuzeigen: keine; es sind visuelle Stile und der Raum, den es einnimmt, ist verborgen und der Raum wird dann “befreit”, weil es kein besseres Wort gibt.

[Bearbeiten] – Es war eine Weile zurück, dass ich das oben geschrieben habe, und ob ich nicht wusste genug oder einen schlechten Tag, weiß ich nicht, aber die Realität ist, das Element wird nie aus der DOM-Hierarchie entfernt. Alle ‘Styles’ auf Blockebene sind bei Verwendung von ‘display’ vollständig ‘versteckt’: bei Sichtbarkeit: verdeckt; Das Element selbst ist verborgen, aber es nimmt immer noch einen visuellen Raum im DOM ein. Ich hoffe, das klärt die Dinge auf