Comment masquer des éléments HTML en utilisant CSS ? Quatre façons de masquer des éléments HTML

La conception Web d’aujourd’hui devient de plus en plus dynamique. Parfois, nous pouvons avoir besoin de masquer certains éléments et de les afficher uniquement lorsque cela est nécessaire. Il existe quatre façons dont nous utilisons couramment CSS pour masquer des éléments HTML. Chacune de ces quatre techniques d'affichage et de masquage d'éléments a ses propres avantages et inconvénients.

Dans cet article, nous utiliserons le code HTML et les styles CSS suivants pour expliquer 4 techniques de masquage d'éléments.

<p>Dice used for traditional Dungeons ...</p>
<img src="dice.jpg" alt=”Photograph..." id="dice">
<p>The dice are used to determine...</p>

Le style CSS de base est le suivant :

img#dice { float: right; margin-left: 2em; }

visibilité : cachée

img#dice { float: right; margin-left: 2em; visibility: hidden; }

visibility: hidden est le premier choix de nombreuses personnes lorsqu'elles masquent un élément HTML. Comme le montre l'image de droite, l'image est manquante, mais elle laisse également une zone vide à l'endroit où se trouvait l'image originale. Cet attribut masque simplement un élément, mais l'espace occupé par l'élément existe toujours.

Le paramètre visibility: visible peut rendre visibles les éléments cachés.

opacité : 0

img#dice { float: right; margin-left: 2em; opacity: 0; }

Il s'agit d'une propriété CSS3, le paramètre opacity: 0 peut créer un élément Devenez entièrement transparent pour créer le même effet que visibility: hidden. L'avantage de opacity par rapport à visibility est qu'il peut être remplacé à la fois par transition et animate.

Vous pouvez généralement utiliser l'attribut opacity pour créer l'effet de fondu d'un élément.

Le paramètre opacity:1 rend les éléments transparents visibles.

position : absolue

img#dice { position: absolute; left: -1000px; }

L'approche la plus ancienne et la plus standard consiste à définir le positionnement absolu d'un élément en éléments cachés. Cette technique retire l'élément du flux de documents, au-dessus du document normal, et lui définit une grande valeur de positionnement left négative, positionnant l'élément en dehors de la zone visible. Ni float ni margin n'affectent l'élément position: absolute, ils peuvent donc être bien cachés.

L'utilisation de cette technique est la meilleure façon de réaliser des animations linéaires de certains éléments.

Pour rendre à nouveau visible un élément, augmentez la valeur de left pour que l'élément apparaisse à l'écran.

affichage : aucun

img#dice { display: none; }

display: none est aussi une technologie très ancienne, c'est et position: absolute, l'élément deviendra invisible et ne prendra plus de place dans le document. visibility: hidden; 

est très utile pour créer un effet accordéon. display: none

Définissez l'élément sur

ou une autre valeur pour rendre l'élément à nouveau visible. display: block

En plus des 4 méthodes décrites ci-dessus, il existe d'autres moyens de masquer des éléments, notamment lors de l'utilisation de CSS3. Par exemple : vous pouvez utiliser l'attribut

pour réduire la taille d'un élément jusqu'à ce qu'il disparaisse. Mais l'attribut scale est le même que scale et opacity: 0, les éléments invisibles prendront de la place dans le document. visibility: hidden

Recommandations associées :

Quels sont les moyens de masquer les éléments HTML ?

javascript contrôle les éléments HTML pour afficher/masquer l'implémentation code_javascript Conseils

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!