divcsmasquer

Div CSS Hiding

En développement web, il est souvent nécessaire de masquer certains éléments. Les plus courants incluent le masquage des fenêtres contextuelles, des menus déroulants, des barres latérales, etc. Il existe de nombreuses façons d'obtenir ces fonctions. Aujourd'hui, nous allons apprendre à utiliser CSS pour masquer des éléments.

En CSS, il existe deux propriétés couramment utilisées qui peuvent être utilisées pour masquer des éléments : l'affichage et la visibilité. Leurs méthodes d’utilisation sont légèrement différentes, parlons-en séparément ci-dessous.

1. attribut d'affichage

L'attribut d'affichage peut contrôler le mode d'affichage des éléments, notamment s'il faut l'afficher, comment l'afficher, etc. Parmi eux, l'affichage : aucun ne peut masquer complètement l'élément sans occuper aucune position ni aucun espace. Lors de l'utilisation de cet attribut, l'élément n'apparaît pas sur la page et n'est pas accessible via JavaScript.

Voyons ensuite comment utiliser l'attribut display pour masquer des éléments :

<!-- HTML 代码 -->
<div id="element">这是一个元素</div>

/* CSS 代码 */
#element {
  display: none;
}

Le code ci-dessus utilise l'attribut display pour masquer l'élément avec l'identifiant de l'élément. Cet élément n'apparaît pas sur la page et ne prend pas de place. Pour réafficher l’élément, définissez simplement la propriété display sur une valeur différente.

En plus de display: none, l'attribut display a également d'autres valeurs, telles que inline, block, inline-block, etc., qui peuvent être sélectionnées en fonction de la situation réelle. Dans l'exemple suivant, nous modifions le mode d'affichage de l'élément en changeant la valeur de l'attribut display :

<!-- HTML 代码 -->
<div id="element">这是一个元素</div>

/* CSS 代码 */
#element {
  display: inline-block;
}

Le code ci-dessus définit l'attribut d'affichage de l'élément avec l'identifiant de l'élément sur inline-block, c'est-à-dire dans le forme d'un spectacle d'éléments en ligne au niveau du bloc. Notez que les éléments ici sont uniquement masqués et affichés, pas complètement supprimés.

2. attribut de visibilité

L'attribut de visibilité peut également contrôler l'affichage et le masquage des éléments, mais contrairement à l'attribut d'affichage, les éléments masqués à l'aide de l'attribut de visibilité occuperont toujours de l'espace, mais ils sont simplement invisibles. Pour les situations où vous avez besoin qu'un élément occupe de l'espace dans sa position d'origine mais ne soit pas affiché, vous pouvez utiliser l'attribut de visibilité.

Ce qui suit est un exemple d'utilisation de l'attribut de visibilité pour masquer des éléments :

<!-- HTML 代码 -->
<div id="element">这是一个元素</div>

/* CSS 代码 */
#element {
  visibility: hidden;
}

Le code ci-dessus utilise l'attribut de visibilité pour masquer l'élément avec l'identifiant de l'élément, mais l'élément occupe toujours sa position sur la page. Comme l'attribut display, l'attribut de visibilité a également d'autres valeurs, telles que visible (valeur par défaut, indiquant que l'élément est visible) et Colombo (utilisé pour les éléments de tableau, indiquant que les cellules sont masquées et fusionnées), etc.

3. Conclusion

Grâce à l'attribut d'affichage et à l'attribut de visibilité, nous pouvons facilement réaliser les fonctions d'affichage et de masquage des éléments. L'application de ces attributs ne se limite pas à masquer des éléments, mais peut également être utilisée pour ajuster le mode d'affichage et le style des éléments, etc., avec une grande flexibilité. Lors du développement de pages Web, vous pouvez faire des choix flexibles en fonction de vos besoins.

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!