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>

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

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

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

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>

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.

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.

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>

1. son1
2. son3

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 !

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.

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>

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

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

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!