Maison > Article > interface Web > Comment cacher un div avec CSS
Comment cacher un div avec CSS
- 藏色散人original
- 2021-04-25 09:30:5010565parcourir
Comment masquer div en utilisant CSS : 1. Utilisez "display:none" pour masquer div ; 2. Utilisez "visibilité : caché ;" pour masquer div ;
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Lorsque nous concevons habituellement le site Web, nous voulons masquer p, mais beaucoup de gens ne savent pas comment contrôler l'affichage et le masquage de p en utilisant CSS ? Expliquons comment masquer p avec CSS.
1. Utilisez display:none pour masquer div
Nous pouvons utiliser l'attribut display:none pour masquer toutes les informations, y compris le texte et les images, la syntaxe est :
dc6dce4a544fdca2df29d5ac0ea9906b这里你是看不到的16b28748ea4df4d9c2150843fecfba68
Lorsque nous utilisons le style CSS dans p, nous pouvons utiliser l'attribut display:none pour masquer le contenu, et il n'est pas visible via le navigateur. En même temps, le contenu caché n'occupe pas d'espace et. est masqué. Le contenu ultérieur ne sera pas lu par les moteurs de recherche. Généralement, nous utilisons le code de statistiques js pour masquer les icônes affichées.
2. Utiliser la visibilité : caché ; masquer le div
L'attribut de visibilité spécifie si l'élément est visible.
Cet attribut précise s'il faut afficher la boîte d'élément générée par un élément. Cela signifie que l’élément occupe toujours son espace d’origine, mais peut être totalement invisible. L'effondrement des valeurs est utilisé dans les tableaux pour supprimer des colonnes ou des lignes de la disposition du tableau.
Valeur de l'attribut :
visible Valeur par défaut. L'élément est visible.
les éléments cachés sont invisibles.
collapse Lorsqu'elle est utilisée dans un élément de tableau, cette valeur supprime une ligne ou une colonne, mais elle n'affecte pas la disposition du tableau. L'espace occupé par les lignes ou les colonnes est mis à disposition pour d'autres contenus. Si cette valeur est utilisée sur un autre élément, elle sera rendue "cachée".
3. Utilisez opacity : 0 pour masquer le div
L'attribut opacity signifie définir la transparence d'un élément. Il n’est pas conçu pour modifier le cadre de délimitation d’un élément.
Cela signifie que définir l'opacité sur 0 masque uniquement visuellement l'élément. L'élément lui-même occupe toujours sa propre position et contribue à la mise en page de la page Web. Ceci est similaire à la visibilité : caché ci-dessus.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--opacity: 0</title>
<style>
div{
height: 20px;
}
.demo{
width: 800px;
height: 60px;
margin: 50px auto;
border: 1px solid red;
}
.hide,span{
opacity: 0;
}
</style>
</head>
<body>
<div>
<div sty>元素隐藏1--opacity: 0</div>
<div>元素隐藏2--opacity: 0</div>
<div>元素隐藏3--opacity: 0</div>
</div>
<div>
<div>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</div>
<div>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</div>
</div>
</body>
</html>Rendu :
[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!