Quels sont les moyens de masquer des éléments en CSS

Méthode : 1. Définissez l'instruction "display:none" ; 2. Définissez l'instruction "visibility:hidden" ; 3. Définissez l'instruction "opacity:0" 4. Définissez l'attribut du modèle de boîte sur 0 ; "position:absolute" ;top:-9999px;" instruction.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment masquer des éléments en CSS

display:none

Régler l'affichage d'un élément sur aucun est la méthode la plus couramment utilisée pour masquer des éléments.

.hide {
    display:none;
}

Après avoir défini l'élément sur display:none, l'élément disparaîtra complètement de la page et l'espace initialement occupé par l'élément sera occupé par d'autres éléments, ce qui signifie que le navigateur sera redistribué et redessiné.

visibilité : caché

Définir la visibilité d'un élément sur caché est également une méthode courante pour masquer des éléments. La différence avec display:none est qu'après la disparition de l'élément de la page, l'espace qu'il occupe sera toujours conservé, donc cela ne fera que redessiner le navigateur sans redistribuer.

.hidden{
   visibility:hidden
}

visibility:hidden convient aux scénarios dans lesquels vous ne souhaitez pas que la mise en page change une fois l'élément masqué

opacity:0

attribut opacity Je crois que tout le monde sait qu'il représente la transparence de l'élément, et après définir la transparence de l'élément sur 0, Aux yeux de nos utilisateurs, les éléments sont également masqués. Il s'agit d'une méthode de masquage d'éléments.

.transparent {
     opacity:0;
}

Un point commun entre cette méthode et visibilité:hidden est que l'élément occupe toujours de l'espace après avoir été masqué, mais nous savons tous qu'après avoir réglé la transparence à 0, l'élément est juste invisible, et il existe toujours sur la page .

Définissez les attributs du modèle de boîte tels que la hauteur et la largeur sur 0

C'est une technique assez étrange que j'ai résumée. En termes simples, il s'agit de définir les attributs de l'élément tels que la marge, la bordure, le remplissage, la hauteur et la largeur qui affectent. le modèle de boîte d'élément sur 0. S'il y a des sous-éléments ou du contenu dans l'élément, vous devez également définir son overflow:hidden pour masquer ses sous-éléments. C'est une astuce.

.hiddenBox {
    margin:0;
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

Cette méthode n'est pas pratique et peut poser quelques problèmes. Mais certains effets de page que nous utilisons habituellement peuvent être complétés de cette manière, comme l'animation slideUp de jquery, qui définit le débordement de l'élément : caché, puis définit en continu la hauteur et la marge supérieure de l'élément via un timer, margin-bottom, border-. top, border-bottom, padding-top, padding-bottom valent 0, obtenant ainsi l'effet slideUp.

position : absolue, définissez l'élément à masquer

span{
	position: absolute;
	top: -9999px;
   	left: -9999px;
}

position : absolue, le principe principal de la définition de l'élément à masquer est de définir le haut et la gauche de l'élément sur un nombre négatif suffisamment grand pour le rendre invisible l'écran.

Apprentissage recommandé : "Tutoriel vidéo CSS"

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!