CSSでスペースを取らずに要素を非表示にする方法-CSSチュートリアル-php.cn

CSSでスペースを取らずに要素を非表示にする方法

青灯夜游

リリース： 2023-01-05 16:13:23

オリジナル

8145 人が閲覧しました

スペースを占有せずに CSS で要素を非表示にする方法: 1. display 属性を使用し、要素に「display:none;」スタイルを追加します。 2. 位置の絶対配置を使用し、「position:absolute;top:-9999px;」スタイルを要素に追加します。

CSSでスペースを取らずに要素を非表示にする方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

1. スペースを占有せずに要素を非表示にするには、display:none を使用します。

display:noneスペースを占有せずに要素を非表示にすることができます。この属性を変更すると、再配置 (ページレイアウトの変更) が発生します。これは、ページから要素が削除されると理解できます。子孫には継承されませんが、その子孫は表示されません。結局、それらはすべてまとめて非表示になります。。

例:

<!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>

ログイン後にコピー

レンダリング:

CSSでスペースを取らずに要素を非表示にする方法

#方法 2: position: ABSOLUTE; TOP: を使用します。 -9999px;位置を占有せずに要素を非表示にする

position:Absolute、要素を非表示に設定する主な原則は、要素の先頭を十分に大きな負の数に設定することです。画面上に表示されます。

例:

<!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>

ログイン後にコピー

レンダリング:

CSSでスペースを取らずに要素を非表示にする方法