CSSでページ要素を非表示にする方法は？ CSS隠し要素の4つの実装方法とその違い（コード例）-CSSチュートリアル-php.cn

CSSでページ要素を非表示にする方法は？ CSS隠し要素の4つの実装方法とその違い（コード例）

青灯夜游

リリース： 2018-09-13 10:17:59

オリジナル

2975 人が閲覧しました

CSS では、要素を非表示にする (つまり、画面内で目に見えないようにする) 方法が多数あり、スペースを占有するものもあれば、スペースを占有しないものもあり、クリックに応答できるものもあれば、クリックに応答できないものもあります。では、これらの CSS メソッドは非表示要素をどのように実装するのでしょうか、またそれらの違いは何でしょうか。この章では、CSSでページ要素を非表示にする方法を紹介します。 CSS隠し要素の4つの実装方法とその違い（コード例）。困っている友人は参考にしていただければ幸いです。

1. CSS での非表示要素の 4 つの実装

1. 可視性: 非表示、要素を非表示に設定します

コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素隐藏--visibility: hidden</title>
		<style>
			.demo{
				width: 800px;
				height: 200px;
				margin: 50px auto;
			}
			span{
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>元素隐藏1--visibility: hidden,元素隐藏2--visibility: hidden,元素隐藏3--visibility: hidden</p>
			<p>元素隐藏1--visibility: hidden,<span>元素隐藏2--visibility: hidden</span>,元素隐藏3--visibility: hidden</p>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSでページ要素を非表示にする方法は？ CSS隠し要素の4つの実装方法とその違い（コード例）

可視性属性は、要素が表示されます。値を hidden に設定すると、要素が視覚的に非表示になるだけです。非表示要素自体は独自の位置を占め、Web ページのレイアウトに影響を与えます。

2. 不透明度: 0、要素を非表示に設定します

コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素隐藏--opacity: 0</title>
		<style>
			.demo{
				width: 800px;
				height: 200px;
				margin: 50px auto;
			}
			span{
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</p>
			<p>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</p>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSでページ要素を非表示にする方法は？ CSS隠し要素の4つの実装方法とその違い（コード例）

opacity 属性は、要素の透明度を設定することを意味します。要素の境界ボックスを変更するようには設計されていません。これは、不透明度を 0 に設定すると、要素が視覚的に非表示になるだけであることを意味します。要素自体は引き続き独自の位置を占め、Web ページのレイアウトに貢献します。これは、上記の「visibility: hidden」に似ています。

3. display:none、要素を非表示に設定します

コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素隐藏--display:none</title>
		<style>
			.demo{
				width: 800px;
				height: 200px;
				margin: 50px auto;
			}
			span{
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>元素隐藏--display:none,元素隐藏--display:none,元素隐藏--display:none</p>
			<p>元素隐藏--display:none,<span>元素隐藏--display:none</span>,元素隐藏--display:none</p>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSでページ要素を非表示にする方法は？ CSS隠し要素の4つの実装方法とその違い（コード例）

display 属性は、単語の意味に従って要素を実際に非表示にします。表示属性を none に設定すると、要素は表示されなくなり、ボックスモデルも生成されなくなります。この属性を使用すると、非表示の要素はスペースを占有しません。それだけでなく、display が none に設定されると、要素に対するユーザーの直接対話操作は無効になります。

4. 位置: 絶対、要素を非表示に設定します

コード実装:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素隐藏--position: absolute</title>
		<style>
			.demo{
				width: 800px;
				height: 200px;
				margin: 50px auto;
			}
			span{
				position: absolute;
				top: -9999px;
   				left: -9999px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
		<p>元素隐藏1--position: absolute,元素隐藏2--position: absolute,元素隐藏3--position: absolute</p>
		<p>元素隐藏1--position: absolute,<span>元素隐藏2--position: absolute</span>,元素隐藏3--position: absolute</p>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSでページ要素を非表示にする方法は？ CSS隠し要素の4つの実装方法とその違い（コード例）

位置: 絶対、要素を非表示に設定します 主な原則は、上と左を設定することです十分な大きさの要素を指定します。負の数を指定すると、画面上で非表示になります。

2. 違い

1. 可視性: 非表示
要素は非表示になりますが、消えることはなく、引き続きスペースを占有します。
は非表示にした後も子孫に継承され、visible を設定することで再表示することもできます。
はこのイベントをトリガーしません。このプロパティを動的に変更すると再描画が発生します。

2. 不透明度:0
透明度のみが 100% であり、要素は非表示になっていますが、依然としてスペースを占有します。
は非表示にしても元の HTML スタイルは変更されず、子要素は継承されません。 opacity=1 Hidden によって反転されます。
opacity:0 の要素でもバインドされたイベントをトリガーできます。

3. display:none
はスペースを占有せず、要素を非表示にするため、この属性を動的に変更すると再配置 (ページレイアウトの変更) が発生します。これは、ページから要素を削除することと理解できます。子孫があっても、それらはすべて一緒に隠されているため、その子孫は表示されません。

4. 位置: 絶対

位置: 絶対、要素の上部と左側を十分に大きな負の数に設定すると、画面上で非表示になり、動的なインタラクティブ効果が得られます。

以上がCSSでページ要素を非表示にする方法は？ CSS隠し要素の4つの実装方法とその違い（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。