css cacher et afficher

Dans la conception Web, masquer et afficher des éléments est un besoin très courant. Afin de masquer et d'afficher des éléments, nous utilisons généralement la propriété CSS display. Cet article présentera les méthodes de masquage et d'affichage couramment utilisées en CSS.

1. Attribut d'affichage en CSS

L'attribut d'affichage est l'un des attributs les plus couramment utilisés en CSS. Il peut contrôler l'affichage ou le masquage des éléments, et peut également modifier l'expression des éléments. L'attribut display a de nombreuses valeurs. Nous n'introduisons ici que quelques valeurs couramment utilisées.

1. display: none

display:none est la méthode la plus couramment utilisée pour masquer des éléments, elle supprime complètement l'élément du flux de documents et n'occupe aucun espace. Même si vous affichez le code HTML de l'élément dans un navigateur, vous ne pourrez pas voir l'élément masqué. L'avantage d'utiliser display:none est que l'élément peut être masqué sans modifier la disposition et que l'élément ne prend pas de place.

Par exemple, nous pouvons utiliser le code CSS suivant pour masquer un élément :

div {
  display: none;
}

2. display: block

display:block est la méthode la plus couramment utilisée pour afficher des éléments. L'élément block commence sur une nouvelle ligne et occupe toute la largeur de l'élément parent. Il peut définir la largeur et la hauteur et peut accueillir des éléments en ligne et des nœuds de texte par défaut.

Par exemple, le code CSS suivant définit l'élément div sur un élément block :

div {
  display: block;
}

3. display: inline

display: inline consiste à afficher l'élément en ligne, apparaissant comme éléments adjacents. Il ne commence pas une nouvelle ligne avant ou après le texte, mais partage une ligne avec d'autres éléments. Il définit la largeur et la hauteur de l'élément, mais ne l'enveloppe pas automatiquement.

Par exemple, nous pouvons utiliser le code CSS suivant pour définir l'élément span sur un élément en ligne :

span {
  display: inline;
}

4. display: inline-block

display: inline-block fait partie de la fonctionnalité qui rend l'élément à la fois en ligne (l'élément ne redémarrera pas) (une ligne), et possède certaines caractéristiques de bloc (la largeur et la hauteur peuvent être définies), et est souvent utilisé pour obtenir certains effets de mise en page, tels que l'effet de mélange de graphiques et de texte.

Par exemple, nous pouvons utiliser le code CSS suivant pour définir l'élément div sur un élément inline-block :

div {
  display: inline-block;
}

2. L'attribut de visibilité en CSS

En plus de l'attribut d'affichage, il existe également un attribut couramment utilisé qui peut afficher et masquer des éléments, c'est l'attribut de visibilité. L'attribut de visibilité est utilisé pour contrôler la visibilité d'un élément et peut être défini sur deux valeurs : visible (valeur par défaut, l'élément est visible) et caché (l'élément est masqué).

1. visibilité : visible

visibilité : visible est la valeur par défaut, qui est la valeur qui rend l'élément visible. Ceci est très similaire au cas de display:block ou display:inline. Cependant, les éléments avec visibilité : visible conservent leur position dans le document et ne sont pas affectés par la mise en page CSS comme les éléments avec display:block ou display:inline. Même si un élément est masqué, vous pouvez toujours utiliser JavaScript ou d'autres techniques pour obtenir la position et la taille de l'élément.

Par exemple, le code CSS suivant définit un élément div sur un état visible :

div {
  visibility: visible;
}

2. visibilité : caché

visibilité : caché est la valeur qui masque l'élément. Cela a le même effet que display:none, mais au lieu de supprimer l'élément du flux de documents, cela conserve l'espace de l'élément. Par conséquent, si un élément est masqué, d’autres éléments prendront sa position et les événements et animations déclenchés par l’élément fonctionneront toujours.

Par exemple, le code CSS suivant définit l'élément div dans un état invisible :

div {
  visibility: hidden;
}

3. L'attribut opacity en CSS

En plus d'utiliser les attributs d'affichage et de visibilité pour masquer et afficher des éléments, vous pouvez également utiliser l'attribut d'opacité en CSS. Attribut d'opacité pour ajuster la transparence des éléments.

1. opacité : 1 (opacité)

opacité : 1 est la valeur par défaut de l'élément, ce qui signifie que l'élément est complètement opaque, c'est-à-dire qu'aucun contenu ultérieur ne peut être vu à travers l'élément.

Par exemple, le code CSS suivant définit un élément div opaque :

div {
  opacity: 1;
}

2. opacité : 0 (entièrement transparent)

opacité : 0 signifie que l'élément est complètement transparent, c'est-à-dire que l'arrière-plan apparaît complètement à travers l'élément . En pratique, l'opacité : 0 est souvent utilisée pour masquer des éléments et préserver l'empreinte de l'élément.

Par exemple, le code CSS suivant définit un élément div complètement transparent :

div {
  opacity: 0;
}

3. opacité : 0,5 (semi-transparent)

opacité : 0,5 signifie que l'élément est semi-transparent, c'est-à-dire que l'arrière-plan peut s'afficher à travers l'élément, mais toujours le contenu de l'élément peut être vu.

Par exemple, le code CSS suivant définit un élément div translucide :

div {
  opacity: 0.5;
}

Résumé

Cet article présente les méthodes de masquage et d'affichage couramment utilisées en CSS, y compris les propriétés d'affichage et de visibilité, ainsi que la propriété d'opacité. Dans le développement réel, nous pouvons choisir différentes méthodes pour masquer et afficher des éléments en fonction de besoins spécifiques. J'espère que cet article pourra vous être utile.

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!