Analyse de la différence entre display:none et visibilité:hidden en CSS

Le contenu de cet article porte sur l'analyse de la différence entre display:none et visible:hidden en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Vous souvenez-vous encore qu'on vous ait demandé lors de l'entretien : « S'il vous plaît, dites-moi la différence entre display : aucun et visibilité : hidden » ? L'intervieweur sourira-t-il après avoir répondu à cette question display:none n'occupe pas la position d'origine et visibilité:hidden conserve la position d'origine ? C'est en fait plus que ça ! Dans cet article, nous approfondirons ensemble leurs rancunes, afin de pouvoir apporter de meilleures réponses lors de la prochaine interview !

Affichage approfondi : aucun

Nous savons tous que lorsqu'un élément est configuré pour afficher : aucun, l'élément ne sera pas affiché sur l'interface, et le L'élément n'occupera pas l'espace de mise en page. Mais nous pouvons toujours manipuler l'élément via JavaScript. Mais pourquoi en est-il ainsi ?
Cela implique le principe de rendu du navigateur : le navigateur va analyser les balises HTML pour générer du DOM  Tree, analyse CSS pour générer CSSOM, puis synthétise DOM Tree et CSSOM pour générer Render Tree, éléments dans Render L'arborescence correspond à 0 ou plusieurs boîtes, puis le navigateur présente et restitue l'interface en fonction des informations du modèle de boîte. Les éléments définis sur display:none ne génèrent pas de modèles de boîtes correspondants dans l'arbre de rendu, donc les travaux ultérieurs de mise en page et de rendu n'ont naturellement rien à voir avec cela. Quant aux opérations DOM, cela est toujours possible.
Mais en plus des points de connaissance ci-dessus, il y a également les 8 points suivants auxquels nous devons prêter attention
1 Éléments avec affichage natif par défaut : aucun
En fait, de nombreux éléments natifs du navigateur ont un affichage. :aucun élément, tel que lien, script, style, boîte de dialogue, entrée [type=hidden], etc.

2 L'attribut booléen caché est ajouté au HTML5, permettant aux développeurs de personnaliser le caractère masqué des éléments

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

3. L'élément parent est display:none, et les éléments descendants ne peuvent pas échapper au désastre

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

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

Le navigateur l'affiche directement comme

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

4. Impossible d'obtenir le focus

S'il n'y a pas de boîte, où pouvons-nous obtenir le focus ? ^_^ Même via la touche de tabulation, il n'y a aucun moyen

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

Impossible de répondre à un événement ? , qu'il s'agisse de capture, d'atteinte de la cible ou de bouillonnement. Oui

Puisque l'élément avec display:none ne sera pas du tout rendu sur l'interface, il n'occupe même pas 1 pixel, donc naturellement il ne peut pas être touché par la souris. cliquez et l'élément ne peut pas obtenir le focus, il ne peut donc pas devenir un événement clavier ; lorsque l'affichage de l'élément parent est nul, l'affichage de l'élément enfant doit être nul, donc l'élément n'a aucune chance d'être activé. le chemin de la capture d'événement ou de l'étape de bouillonnement, donc l'élément avec display:none ne peut pas répondre à l'événement.

6. Ne retardez pas la soumission des données du formulaire

Bien que nous ne puissions pas voir l'élément display:none, la valeur de l'élément d'entrée masqué sera toujours soumise lors de la soumission du formulaire.

     

7. Le compteur en CSS ignorera l'élément

display:none

.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>

Le résultat est :

1. son1
2. son3

8. display Pas froid

9. Le reflow sera déclenché lorsque l'affichage change

Laissant de côté display:none, voyons que display:block signifie que l'élément est situé dans BFC, tandis que display:inline signifie que l'élément est situé dans IFC. En d'autres termes, le but de l'affichage est de définir le contexte de mise en page auquel l'élément appartient. Si la valeur d'affichage est modifiée, cela signifie que la méthode de mise en page adoptée par l'élément a changé. ce serait étrange si la refusion ne se déclenche pas !

Visibilité approfondie

La visibilité a deux fonctions différentes

Utilisé pour masquer les lignes et les colonnes du tableau

Utilisé pour masquer les lignes et les colonnes du table sans déclencher la mise en page Élément caché

4 valeurs valides

1. visible

Il n'y a rien à dire, c'est juste affiché sur l'interface.
2.hidden
Rendre l'élément invisible à l'écran, mais conserver la position d'origine de l'élément.
3.collapse
Lorsqu'il est utilisé sur des sous-éléments de table (tels que tr, tbody, col, colgroup), l'effet est le même que display:none. Lorsqu'il est utilisé sur d'autres éléments, l'effet est le même que celui de display:none. visibilité : masquée. Toutefois, étant donné que les effets d'implémentation de chaque navigateur sont différents, cette valeur n'est généralement pas utilisée.
4.inherit
Hérite de la valeur de visibilité de l'élément parent.

Comparez clairement display:none et visibilité:hidden

Ci-dessus, nous avons listé 8 points à noter sur display:none, il nous suffit donc de les comparer et de lister les visibilités une par une, et ce sera déjà clair ?

1. L'élément parent est visibilité:hidden, et l'élément enfant peut être défini sur visibilité:visible et prendre effet

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

Résultat :

2. Impossible d'obtenir le focus comme display:aucun

3 Peut répondre aux événements en phase de bouillonnement

Étant donné que les éléments enfants d'un élément sont définis sur visibilité : Hidden peut être visibilité:visible, Par conséquent, l'élément caché peut être situé sur le chemin de l'événement bouillonnant. Par conséquent, dans le code suivant, lorsque la souris est déplacée vers .visible, .hidden sera affiché en réponse à l'événement de survol. .

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. Comme display:none, cela n'empêche pas la soumission du formulaire

5. Le compteur en CSS n'ignorera pas

6. 🎜>

7. Les changements de visibilité ne déclencheront pas la redistribution

Étant donné que les attributs liés à la disposition de l'élément ne seront pas modifiés lorsqu'il passe de visible à masqué, la redistribution ne sera pas déclenchée et elle se fera simplement en silence. rejoignez d'autres modifications de rendu. Attendez que le navigateur redessine régulièrement l'interface.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!