Quelle est la différence entre définir le style d'un contrôle display: none
et display: block
?
La propriété display définit comment un certain élément HTML doit être affiché. Afficher block
et none
sont utilisés pour afficher ou masquer les éléments HTML. Vous pouvez en savoir plus sur la propriété display et les options disponiblesici.
none: L'élément ne sera pas affiché du tout.
block: L'élément affiché en tant qu'élément de niveau bloc (comme les paragraphes et les en-têtes)
Affichage: aucun; - L'élément est dans la DOM
mais n'est PAS visible et ne prend aucune space
contrairement à visibility:hidden
.
Bloc de visualisation; - Un élément de bloc reprend le full width
disponible et ne permet pas de placer d'autres éléments à côté d'eux. Exemple: div
Ces deux propriétés de style font deux choses différentes.
display: none supprime complètement l'élément du document. Il ne prend aucun espace, même si le code HTML utilisé est toujours dans le code source. (L'élément ne générera aucune boîte)
display: block l'élément s'étendra sur toute la largeur de l'espace disponible. (un saut de ligne avant et après l'élément)
Il y a une autre nuance à afficher: aucune; Si vous insérez dynamiquement une div en tant qu'enfant dans un parent div - et que vous définissez explicitement la propriété de visibilité de l'enfant sur "visible", la propriété de visibilité du parent ne fera que rendre visible la propriété. parent visible/invisible; l'enfant restera visible, quel que soit le paramètre de visibilité du parent.
Dans un tel cas (où la visibilité parent/enfant est définie par différentes règles de style), le paramètre display: none du parent volonté masque tous les enfants - même si les parents/enfants sont stylés indépendamment. texte souligné
display: none signifie que l'élément n'est pas affiché du tout (vous ne le verrez donc pas non plus dans l'exemple).
display: block signifie que l'élément est affiché comme un bloc, comme l'ont toujours été les paragraphes et les en-têtes. Un bloc comporte des espaces au-dessus et au-dessous et ne tolère aucun élément HTML à côté, sauf ordre contraire
Vous parlez d'une propriété CSS, je pense. Ceci est utilisé pour afficher/masquer les éléments DOM
La propriété CSS est display et la valeur est 'none', 'block', etc.
Référence de:Affichage CSScomme suggéré par http://w3fools.com/
bloc
L'objet est rendu sous forme d'élément de bloc.
aucun
L'élément n'est pas restitué. L'élément (il n'a pas d'effet sur la présentation); l'affichage de tous les éléments enfants est également désactivé. Le document est rendu comme si l'élément n'existait pas.
inline
Défaut. L'objet est rendu sous la forme d'un élément en ligne, dimensionné par les dimensions du contenu.
list-item
Internet Explorer 6 et versions ultérieures. L'objet est rendu sous forme d'élément de bloc et un marqueur d'élément de liste est ajouté.
table-header-group
L'objet est rendu en tHead. L'en-tête de la table est toujours affiché avant toutes les autres lignes et groupes de lignes et après les légendes supérieures. L'en-tête est affiché sur chaque document fractionné par une table.
groupe-pied-de-page
L'objet est rendu en tant que tFoot. Le pied de table est toujours affiché après toutes les autres lignes et groupes de lignes, et avant les légendes inférieures. Le pied de page est affiché sur chaque document recouvert par un tableau.
inline-block
L'objet est rendu en ligne, mais le contenu de l'objet est rendu sous forme d'élément de bloc. Les éléments en ligne adjacents sont rendus sur la même ligne, si l'espace est suffisant.
Afficher aucun: masque le contrôle. en définissant la propriété de element style = "display: none", l'élément ne sera pas rendu dans la page Web et n'aura pas lieu
Afficher le bloc: affiche l'élément sur la page Web au niveau du bloc
Display none masquera le contenu, ici si vous l'appliquez sur div, la largeur et la hauteur de div seront également masquées. Le bloc d'affichage affichera le contenu.
Display:none;
signifie que l'élément ne sera pas affiché et Display:block;
signifie que l'élément est affiché en tant qu'élément de niveau bloc (comme les paragraphes et les en-têtes).