Prinzip des Ausblendens von CSS-Elementen und display:none und visibility:hidden

Prinzip des Ausblendens von CSS-Elementen und display:none und visibility:hidden
1. CSS-Elemente verbergen <br />In CSS gibt es viele Möglichkeiten, Elemente zu verbergen (d. h. sie für das bloße Auge im Bildschirmbereich unsichtbar zu machen). Einige von ihnen nehmen Platz ein, andere nicht; einige können auf Klicks reagieren, andere nicht. Schauen Sie sie sich einzeln an.

Code kopieren
Der Code lautet wie folgt:

{ display: none; /* Nimmt keinen Platz weg, kann nicht angeklickt werden*/ }
/************************************************************************************/
{ Sichtbarkeit: versteckt; /* nimmt Platz weg, kann nicht angeklickt werden */ }
/************************************************************************************/
{ position: absolute; top: -999em; /* Nimmt keinen Platz ein, kann nicht angeklickt werden*/ }
/************************************************************************************/
{ position: relative; top: -999em; /* nimmt Platz weg, kann nicht angeklickt werden*/ }
/************************************************************************************/
{ position: absolute; visibility: hidden; /* Nimmt keinen Platz weg, kann nicht angeklickt werden*/ }
/************************************************************************************/
{ height: 0; overflow: hidden; /* Nimmt keinen Platz ein, kann nicht angeklickt werden */ }
/************************************************************************************/
{ Opazität: 0; Filter:Alpha(Opazität=0); /* Nimmt Platz ein, kann angeklickt werden */ }
/************************************************************************************/
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* Nimmt keinen Platz weg, kann angeklickt werden*/ }
/************************************************************************************/
{
Zoom: 0,001;
-moz-transform: Skalierung(0);
-webkit-transform: Skalierung(0);
-o-transform: Skalierung(0);
transformieren: Skalierung(0);
/* IE6/IE7/IE9 belegen keinen Speicherplatz, IE8/FireFox/Chrome/Opera schon. Kann nicht klicken*/
}
/************************************************************************************/
{
Position: absolut;
Zoom: 0,001;
-moz-transform: Skalierung(0);
-webkit-transform: Skalierung(0);
-o-transform: Skalierung(0);
transformieren: Skalierung(0);
/* Nimmt keinen Platz ein und kann nicht angeklickt werden*/
}

2. Anzeige: keine und Sichtbarkeit: ausgeblendet
Mir sind derzeit drei Unterschiede bekannt (gerne auch als Ergänzung):
1. Raumbelegung
2. Reflow und Rendering
3. Beteiligung
Das Ausblenden mit display:none führt zu einem Reflow und Neuzeichnen, während bei visibility:hidden dieses Problem, das die Front-End-Leistung beeinträchtigt, nicht auftritt. Der dritte Punkt ist vielen Kollegen wahrscheinlich unbekannt, nämlich der Unterschied in der „Assoziation“.
Die sogenannte „Kollektivstrafe“ bedeutet, dass, wenn einem Vorfahren eine Katastrophe widerfährt, alle seine Nachkommen ohne Ausnahme darunter leiden. display:none ist eine offensichtliche Aussage zur „Kettenverantwortung“: Sobald display:none auf ein übergeordnetes Element angewendet wird, werden das übergeordnete Element und seine untergeordneten Elemente alle unsichtbar, und egal, wie sehr sich die untergeordneten Elemente dagegen wehren, es wird nichts nützen.
In tatsächlichen Webanwendungen müssen wir häufig einige Anzeige- und Ausblendfunktionen implementieren. Aufgrund der Eigenschaften von display:none selbst und des potenziellen Treibers von jQuery sind wir mit der Ausblendfunktion von display:none ziemlich vertraut. Daher wird sich im Laufe der Zeit ein relativ solides emotionales Verständnis herausbilden, und dieses Verständnis wird sich zwangsläufig auf das Verständnis anderer ähnlicher Leistungsmerkmale (z. B. Sichtbarkeit) sowie einiger konventioneller Erfahrungen übertragen …
Wenn wir beispielsweise „visibility:hidden“ auf ein übergeordnetes Element anwenden, sind normalerweise auch alle seine untergeordneten Elemente unsichtbar. Daher kommt es zu einer ähnlichen Verschiebung unseres Verständnisses: Egal, wie sehr sich die abgeleiteten Elemente mit der Deklaration „Sichtbarkeit:Versteckt“ abmühen, sie können ihrem Schicksal, unsichtbar und ausgelöscht zu werden, nicht entgehen. In der Realität gibt es jedoch versteckte „Misserfolge“.
Wann soll das „Ablaufdatum“ ausgeblendet werden? Es ist ganz einfach. Wenn Sichtbarkeit:sichtbar auf ein untergeordnetes Element angewendet wird, wird das untergeordnete Element wie Liu Qian angezeigt.

Sichtbarkeit ist so eine witzige Eigenschaft.
Vergleichszusammenfassung :
display:none ist eine ziemlich unmenschliche Aussage, da alle zukünftigen Generationen getötet werden (Kollektivstrafe) und nicht einmal ein Ort übrig bleibt, um sie zu begraben (kein Platz mehr übrig), was einen Aufruhr in der Öffentlichkeit verursacht (Übertreibung und Nachrede).
Sichtbarkeit:Versteckt zeigt humanitäres Interesse. Obwohl die Nachkommen getötet werden müssen, können sie dies durch bestimmte Mittel vermeiden (Pseudo-Beschuldigung). Darüber hinaus bleibt der Körper nach dem Tod unversehrt und der Friedhof ist vollständig (Platzbedarf). Die einheimische Bevölkerung ist relativ gleichgültig (keine Übertreibung und kein Reflux).

<<:  Erweiterte Erklärung der Javascript-Funktionen

>>:  Tiefes Verständnis des Mechanismus des CSS-Hintergrund-Blend-Modus

Artikel empfehlen

Eine kurze Diskussion über MySQL-Ereignisplanungsaufgaben

1. Prüfen Sie, ob das Ereignis aktiviert ist Vari...

Detaillierte Analyse von or, in, union und Indexoptimierung in MySQL

Dieser Artikel entstand aus der Hausaufgabe „Erle...

Details zu 7 Arten der Komponentenkommunikation in Vue3

Inhaltsverzeichnis 1. Kommunikationsmethode für V...

Javascript-Baummenü (11 Elemente)

1. dhtmlxBaum dHTMLxTree ist ein Tree-Menu-Steuer...

Vue verwendet Echart, um Beschriftungen und Farben anzupassen

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung der Rolle und des Prinzips des Schlüssels in Vue

Inhaltsverzeichnis 1. Beginnen wir mit dem Fazit ...

MySQL: Praktische Erfahrung mit der Verwendung der Insert-Anweisung

Inhaltsverzeichnis 1. Mehrere Syntaxen von Insert...

Erläuterung zu JavaScript-Anti-Shake und -Throttling

Inhaltsverzeichnis Stabilisierung Drosselung Zusa...

Beispiel, wie nginx dynamische und statische Trennung implementiert

Inhaltsverzeichnis Stellen Sie nginx auf Server1 ...

Detaillierte Erklärung der node.js-Installation und HbuilderX-Konfiguration

Tutorial zur npm-Installation: 1. Laden Sie das N...

Detailliertes Tutorial zur Installation von InfluxDB in Docker (Leistungstest)

1. Voraussetzungen 1. Das Projekt wurde bereitges...

So verstehen Sie den einfachen Speichermodus der Statusverwaltung von Vue

Inhaltsverzeichnis Überblick 1. Definieren Sie st...

Wichtige Updates für MySQL 8.0.23 (neue Funktionen)

Autor: Guan Changlong ist DBA in der Delivery Ser...