élément caché CSS caché

CSShidden element Hidden

Le masquage d'éléments est une technique fréquemment utilisée lors de la conception et du développement de sites Web. Parfois, vous souhaiterez peut-être masquer du contenu inutile sur la page ou afficher certains éléments lorsque cela est nécessaire. La technologie de masquage des éléments cachés de CSS rend cela simple et élégant.

Dans cet article, nous présenterons deux façons de masquer des éléments en CSS : l'attribut d'affichage et l'attribut de visibilité.

Utilisez l'attribut display pour masquer les éléments

L'attribut display contrôle l'apparence et le comportement de l'élément. Cela peut prendre plusieurs valeurs, mais nous nous concentrerons uniquement sur trois d'entre elles : block, inline et none.

Lorsque la valeur de l'attribut display est block, l'élément est affiché comme un élément de niveau bloc sur la page. Les éléments de niveau bloc commencent toujours sur une nouvelle ligne et occupent toute la largeur disponible. Cela signifie qu'ils poussent tous les éléments de la même ligne vers une nouvelle ligne.

Lorsque la valeur de l'attribut display est en ligne, l'élément est affiché en tant qu'élément en ligne sur la page. Les éléments en ligne n'interrompent pas le flux du texte mais apparaissent dans la ligne de texte actuelle. Ils n'occupent que la largeur dont ils ont besoin et ne forcent pas une nouvelle ligne.

Lorsque la valeur de l'attribut display est nulle, l'élément est supprimé de la page et l'espace occupé n'est pas conservé. Cela signifie que l'utilisation de display:none peut masquer complètement un élément et que les autres éléments rempliront automatiquement la position d'origine de l'élément.

Voici un exemple de code illustrant comment utiliser l'attribut display pour masquer des éléments :

.hide {
  display: none;
}

.hide-block {
  display: block;
  height: 0;
  overflow: hidden;
}

.hide-inline {
  display: inline;
  visibility: hidden;
}

Dans le code ci-dessus, le premier morceau de code utilise display:none pour masquer complètement l'élément. Le deuxième morceau de code utilise display:block et height:0 pour définir la hauteur de l'élément de niveau bloc sur 0, et utilise overflow:hidden pour résoudre le problème résultant. Le troisième morceau de code utilise display:inline et visible:hidden pour donner à l'élément en ligne une largeur de 0 tout en conservant l'espace qu'il occupe.

Utilisez l'attribut visibilité pour masquer des éléments

L'attribut visibilité peut également masquer des éléments. Il a deux valeurs : visible et masqué.

Lorsque la valeur de l'attribut de visibilité est visible, l'élément s'affiche comme un élément normal sur la page. La propriété de visibilité est définie sur visible par défaut.

Lorsque la valeur de l'attribut visibilité est masquée, l'élément n'est pas visible sur la page, mais l'espace qu'il occupe est conservé. Cela signifie que même si l'élément n'est pas visible, la mise en page de la page n'est pas affectée.

Voici un exemple de code qui illustre comment utiliser l'attribut de visibilité pour masquer un élément : espace.

Summary

L'utilisation de CSS pour masquer des éléments est une technique courante de conception et de développement de sites Web. En utilisant les propriétés d'affichage et de visibilité en CSS, vous pouvez facilement masquer des éléments et les afficher à nouveau si nécessaire. Utilisez display:none pour masquer complètement un élément, tandis que visible:hidden rend l'élément invisible mais conserve l'espace qu'il occupe. Dans le développement réel, les éléments CSS masqués doivent être utilisés avec prudence pour éviter d'affecter l'accessibilité et l'expérience utilisateur de la page.

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!