Comment masquer des éléments sans prendre de place en CSS-tutoriel CSS-php.cn

Comment masquer des éléments sans prendre de place en CSS

青灯夜游

Libérer： 2023-01-05 16:13:23

original

8121 Les gens l'ont consulté

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.

Comment masquer des éléments sans prendre de place en CSS

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>

Copier après la connexion

Rendu :

Comment masquer des éléments sans prendre de place en CSS

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>

Copier après la connexion

Rendu :

Comment masquer des éléments sans prendre de place en CSS