Maison > Article > interface Web > Comment masquer des éléments sans prendre de place en CSS
Comment masquer des éléments sans prendre de place en CSS
- 青灯夜游original
- 2021-05-04 09:34:578114parcourir
Comment masquer des éléments en CSS sans occuper d'espace : 1. Utilisez l'attribut display et ajoutez le style "display:none;" à l'élément. 2. Utilisez le positionnement absolu et ajoutez le style "position:absolute;top:-9999px;" à l'élément.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
1. Utilisez display:none pour masquer des éléments sans occuper d'espace
display:noneVous pouvez masquer des éléments sans occuper d'espace, donc la modification dynamique de cet attribut entraînera un réarrangement ( changer la mise en page) peut être compris comme la suppression de l'élément de la page ; il ne sera pas hérité par les descendants, mais ses descendants ne seront pas affichés. Après tout, ils sont tous cachés ensemble.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>不占位隐藏元素--display:none</title>
<style>
.display{
display:none;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="display">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html> Rendu :
Méthode 2 : Utilisez position: absolute;top: -9999px; pour vous cacher sans occuper d'espace Position
de l'élément : absolue, le principe principal de la définition de l'élément à masquer est de définir le haut de l'élément sur un nombre négatif suffisamment grand pour le rendre invisible à l'écran.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>不占位隐藏元素--position: absolute</title>
<style>
.position {
position: absolute;
top: -9999px;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="position">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>Rendu :
(Partage vidéo d'apprentissage : 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!