Analyse des Unterschieds zwischen display:none und Visibility:hidden in CSS

Der Inhalt dieses Artikels befasst sich mit der Analyse des Unterschieds zwischen „display:none“ und „visibility:hidden“ in CSS. Ich hoffe, dass er für Sie hilfreich ist.

Erinnern Sie sich noch daran, dass Sie im Vorstellungsgespräch gefragt wurden: „Bitte erklären Sie mir den Unterschied zwischen display:none und sichtbarkeit:hidden“? Wird der Interviewer lächeln, nachdem er auf die Frage „display:none“ geantwortet hat, die nicht die ursprüngliche Position einnimmt und „visibility:hidden“ die ursprüngliche Position beibehält? Es ist tatsächlich mehr als das! In diesem Artikel gehen wir gemeinsam auf ihre Beschwerden und Ressentiments ein, um im nächsten Interview bessere Antworten geben zu können!

Ausführliche Anzeige:none

Wir alle wissen, dass, wenn ein Element auf display:none eingestellt ist, das Element nicht auf der Benutzeroberfläche angezeigt wird und das Das Element belegt nicht den Layoutbereich. Wir können das Element jedoch weiterhin über JavaScript bearbeiten. Aber warum ist das so?
Dies beinhaltet das Rendering-Prinzip des Browsers: Der Browser analysiert HTML-Tags, um DOM  zu generieren Tree analysiert CSS, um CSSOM zu generieren, und synthetisiert dann DOM Tree und CSSOM, um Render Tree-Elemente in Render zu generieren Der Baum entspricht 0 oder mehr Boxen, und dann gestaltet und rendert der Browser die Schnittstelle mit den Informationen des Boxmodells. Elemente, die auf „display:none“ eingestellt sind, generieren keine entsprechenden Boxmodelle im Renderbaum, sodass nachfolgende Layout- und Rendering-Arbeiten natürlich nichts damit zu tun haben. Was DOM-Operationen betrifft, ist dies weiterhin möglich.
Aber zusätzlich zu den oben genannten Wissenspunkten müssen wir auch auf die folgenden 8 Punkte achten
1 Elemente mit nativer Standardanzeige:keine
Tatsächlich verfügen viele native Browserelemente über eine Anzeige :none-Elemente wie Link, Skript, Stil, Dialog, Eingabe [Typ=versteckt] usw.

2 Das versteckte boolesche Attribut wird zu HTML5 hinzugefügt, sodass Entwickler die Verborgenheit von Elementen anpassen können

/* 兼容原生不支持hidden属性的浏览器  */
[hidden]{
  display: none;
}
<span>Hide and Seek: You can't see me!</span>

3. Das übergeordnete Element ist display:none, und untergeordnete Elemente können der Katastrophe nicht entgehen

.hidden{
  display: none;
}
.visible{
  display: block;
}

*** START ***
<div>
  I'm parent!
  <div> I'm son! </div>
</div>
*** END ***

Der Browser zeigt es direkt als

*** START ***
*** END ***

4 an. Fokus kann nicht erhalten werden
Es gibt ursprünglich kein Feld? ^_^ Selbst über die Tabulatortaste gibt es keine Möglichkeit

<!-- 真心不会获得焦点 -->
<input>
<div>hidden</div>

Es ist nicht möglich, auf ein Ereignis zu reagieren, egal ob es sich um das Erfassen, das Treffen oder das Ziel handelt Blasenstadium
Aufgrund von display:none Das Element wird überhaupt nicht auf der Schnittstelle gerendert, es belegt nicht einmal 1 Pixel, sodass es natürlich nicht per Mausklick getroffen werden kann und das Element keinen Fokus erhalten kann, also nicht das Ziel von Tastaturereignissen sein; und die Anzeige des übergeordneten Elements. Wenn es keine ist, darf die Anzeige des untergeordneten Elements keine sein, sodass das Element keine Chance hat, sich auf dem Pfad der Ereigniserfassung oder der Bubbling-Phase zu befinden Element mit display:none kann nicht auf das Ereignis reagieren.

6. Formularübermittlungsdaten nicht verzögern
Obwohl wir das display:none-Element nicht sehen können, wird der Wert des ausgeblendeten Eingabeelements dennoch übermittelt, wenn das Formular übermittelt wird.

7. Der Zähler in CSS ignoriert das display:none-Element

.start{
  counter-reset: son 0;
}
.son{
  counter-increment: son 1;
}
.son::before{
  content: counter(son) ". ";
}

<div>
  <div>son1</div>
  <div>son2</div>
  <div>son3</div>
</div>

Das Ergebnis ist:

1. son1
2. son3

8. Transition ist nicht an Anzeigeänderungen interessiert

9. Reflow wird ausgelöst, wenn sich die Anzeige ändert.
Wenn wir display:none beiseite lassen, sehen wir, dass display:block bedeutet, dass sich das Element in BFC befindet, während display:inline bedeutet, dass sich das Element in befindet IFC, was bedeutet, dass der Layoutkontext, zu dem das Element gehört, festgelegt wird. Wenn der Anzeigewert geändert wird, bedeutet dies, dass sich die vom Element verwendete Layoutmethode geändert hat. Es wäre seltsam, wenn kein Reflow ausgelöst würde !

Tiefe Sichtbarkeit

Sichtbarkeit hat zwei verschiedene Funktionen

wird verwendet, um die Zeilen und Spalten der Tabelle auszublenden

wird verwendet, ohne das Layout auszulösen. Verstecktes Element

4 gültige Werte

1. sichtbar
Es gibt nichts zu sagen, es wird nur auf der Oberfläche angezeigt.
2.hidden
Machen Sie das Element auf dem Bildschirm unsichtbar, behalten Sie jedoch die ursprüngliche Position des Elements bei.
3.collapse
Bei Verwendung auf Tabellenunterelementen (z. B. tr, tbody, col, colgroup) ist der Effekt derselbe wie bei display:none. Bei Verwendung auf anderen Elementen ist der Effekt derselbe Sichtbarkeit:versteckt. Da jedoch die Implementierungseffekte jedes Browsers unterschiedlich sind, wird dieser Wert im Allgemeinen nicht verwendet.
4.inherit
Erbt den Sichtbarkeitswert des übergeordneten Elements.

Anzeige:none und sichtbarkeit:verborgen klar vergleichen

Oben haben wir 8 Punkte aufgeführt, die Sie zu display:none beachten sollten. Wir müssen sie also nur vergleichen und die Sichtbarkeit einzeln auflisten es wird schon klar sein?
1. Das übergeordnete Element ist „visibility:hidden“ und das untergeordnete Element kann auf „visible:visible“ gesetzt werden und wirksam werden

div{
  border: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
<div>
  I'm Parent.
  <div>
    I'm Son.
  </div>
</div>

Ergebnis:

2. Fokus wie display:none kann nicht erhalten werden

3. Kann auf Ereignisse während der Bubbling-Phase reagieren
Da die untergeordneten Elemente eines Elements auf „visibility:hidden“ eingestellt sind, können Seien Sie sichtbar: sichtbar, es ist versteckt Das Element befindet sich möglicherweise auf dem Pfad des sprudelnden Ereignisses. Daher wird im folgenden Code als Reaktion auf das Hover-Ereignis .hidden angezeigt, wenn die Maus auf .visible bewegt wird.

div{
  border: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
.hidden:hover{
  visibility: visible;
}
<div class="hidden">
  I&#39;m Parent.
  <div class="visible">
    I&#39;m Son.
  </div>
</div>

4. Wie display:none, verhindert es nicht die Formularübermittlung

5. Der Zähler in CSS wird nicht ignoriert

6. Der Übergang ist wirksam für Änderungen in Sichtbarkeit

7. Sichtbarkeitsänderungen lösen keinen Reflow aus
Da die Attribute im Zusammenhang mit dem Layout des Elements nicht geändert werden, wenn es von sichtbar auf ausgeblendet gesetzt wird, wird kein Reflow ausgelöst, sondern nur Warten Sie ruhig auf das Durchsuchen mit anderen Rendering-Änderungen. Der Controller zeichnet die Benutzeroberfläche regelmäßig neu.

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