CSS pour implémenter le masquage

CSS (Cascading Style Sheets) est un langage utilisé pour contrôler le style et la mise en page des pages Web. Lors de la création de pages Web, nous devons souvent utiliser CSS pour définir les styles des éléments, tels que les polices, les couleurs d'arrière-plan, les bordures, etc. Il existe également un attribut magique en CSS - display, qui peut contrôler le mode d'affichage des éléments, y compris le masquage.

Pourquoi devez-vous masquer des éléments ? Il y a de nombreuses scènes. Par exemple, lors de la création d'une page avec plusieurs onglets, nous pouvons souhaiter afficher uniquement le contenu de l'onglet actuellement sélectionné et masquer d'abord le contenu des autres onglets. Pour un autre exemple, nous devrons peut-être ajouter un bouton de fermeture à la page, qui peut masquer un élément lorsqu'on clique dessus, etc.

Ensuite, nous présenterons en détail plusieurs méthodes pour masquer des éléments en CSS.

1. Attribut d'affichage

display est l'attribut le plus couramment utilisé en CSS pour contrôler le mode d'affichage des éléments. Par défaut, tous les éléments sont affichés. Si vous souhaitez masquer un élément, vous pouvez le faire en modifiant l'attribut display. Voici plusieurs valeurs de l'attribut display :

1. none

Masquez l'élément et supprimez-le du flux de documents, c'est-à-dire qu'il ne prend pas de place. Cela signifie que les éléments masqués n’ont plus d’impact sur la mise en page.

Exemple de code :

.hide {
  display: none;
}

2. block

Convertissez les éléments en éléments de niveau bloc et affichez-les. Un élément de niveau bloc occupe sa propre ligne, a une largeur et une hauteur définies et peut accueillir d'autres éléments de niveau bloc et éléments en ligne.

Exemple de code :

.show {
  display: block;
}

3. inline

Convertissez les éléments en éléments en ligne et affichez-les. Les éléments en ligne n'occupent pas une seule ligne. La largeur et la hauteur sont déterminées par le contenu et ne peuvent accueillir que d'autres éléments en ligne.

Exemple de code :

.show {
  display: inline;
}

4. inline-block

Convertissez les éléments en éléments de niveau bloc en ligne et affichez-les. Les éléments de niveau bloc en ligne ont les caractéristiques suivantes : les éléments de niveau bloc peuvent définir la largeur et la hauteur, et les éléments en ligne peuvent accueillir d'autres éléments en ligne.

Exemple de code :

.show {
  display: inline-block;
}

2. Attribut de visibilité

L'attribut de visibilité peut également être utilisé pour contrôler le mode d'affichage des éléments. Contrairement à l'affichage, après avoir utilisé la visibilité pour masquer un élément, l'élément prend toujours de la place, mais n'est plus affiché. Voici plusieurs valeurs pour l'attribut visibilité :

1. visible

L'élément est visible et affiché selon la méthode de positionnement.

2. caché

L'élément est invisible, mais prend quand même de la place. Contrairement à display:none, la largeur et la hauteur de l'élément sont toujours valides.

3. collapse

Pour les éléments de tableau, la bordure et le remplissage de l'élément seront ignorés, donnant l'impression que la ligne du tableau n'a pas de tableau.

Exemple de code :

.hide {
  visibility: hidden;
}

3. Attribut d'opacité

L'attribut d'opacité peut obtenir l'effet de disparition progressive des éléments. La valeur est comprise entre 0 et 1, indiquant la transparence de l'élément.

1. 0

Complètement transparent, c'est-à-dire que l'élément est invisible.

2. 1

Entièrement opaque, c'est-à-dire que l'élément est entièrement visible.

3. 0.5

Translucide, c'est-à-dire que l'élément est partiellement visible et partiellement invisible.

Lorsque la transparence est de 0, l'élément est non seulement invisible, mais n'occupe également aucun espace. Mais soyez prudent lorsque vous utilisez l'opacité pour masquer des éléments. Même s'il semble caché, l'élément est toujours là. Si vous souhaitez que l'élément n'occupe pas d'espace et soit masqué, vous devez le combiner avec d'autres méthodes telles que display:none ou visible:hidden.

Exemple de code :

.hide {
  opacity: 0;
}

Grâce aux trois méthodes ci-dessus, des éléments peuvent être masqués pour répondre à des besoins de conception personnalisés. Il convient de noter que pour les éléments pouvant être téléchargés, tels que les images, il n'est pas sûr de protéger les droits de propriété intellectuelle en les masquant, et d'autres technologies doivent être utilisées pour assurer cette protection.

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!