CSSを非表示にする方法にはどのようなものがありますか?表示: なし、不透明度: 0、可視性: 非表示の違いは何ですか?-CSSチュートリアル-php.cn

CSSを非表示にする方法にはどのようなものがありますか?表示: なし、不透明度: 0、可視性: 非表示の違いは何ですか?

yulia

リリース： 2018-09-06 18:07:43

オリジナル

2963 人が閲覧しました

ページを書くとき、私たちはよく非表示を使用します。非表示方法とその違いは何ですか?
不透明度の値を 0 に、可視性を非表示に、または表示なしに設定できます。ただし、それぞれの方法には違いがあり、それによって特定の状況で正しい選択ができるようになります。次の記事では、状況に応じて適切な方法を選択できるように、それらの違いについて説明します。

1.display:none
この属性を使用すると、非表示の要素はスペースを占有しません。このメソッドの効果は、要素がまったく存在していないかのようになり、この要素の子孫も同時に非表示になります。つまり、要素はページから完全に消え、見ることも触れることもできません。
例: 要素を非表示にするためにスタイル "display:none" を使用します。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{width: 100px;height: 100px;background: red;display: none;}
   .a2{width: 100px;height: 100px;background: yellow;}
  </style>
 </head>
 <body>
  <div class="a1">have a nice day</div>
  <div class="a2">have a nice day</div>
 </body>
</html>

ログイン後にコピー

レンダリング:

CSSを非表示にする方法にはどのようなものがありますか?表示: なし、不透明度: 0、可視性: 非表示の違いは何ですか?

2. 不透明度
この属性は、オブジェクトの透明度が 0 の場合に設定します。そのとき、視覚的には消えましたが、平たく言えば、それはまだその位置を占めていました。この属性を使用して要素を追加すると、それに応じて背景と要素のコンテンツも変更されます。
例: スタイル「不透明度: 0」を使用して要素を非表示にします

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{width: 100px;height: 100px;background: red;opacity: 0;}
   .a2{width: 100px;height: 100px;background: yellow;}
  </style>
 </head>
 <body>
  <div class="a1">have a nice day</div>
  <div class="a2">have a nice day</div>
 </body>
</html>

ログイン後にコピー

レンダリング:

CSSを非表示にする方法にはどのようなものがありますか?表示: なし、不透明度: 0、可視性: 非表示の違いは何ですか?

3. 可視性: hidden
属性値が hidden に設定されている場合、要素は非表示になります。ただし、Web ページ上でオブジェクトが占めるスペースは変化していません。平たく言えば、それは目に見えませんが、具体的です。このプロパティは Web ページのレイアウトに影響しますが、不透明度プロパティと似ていますが、不透明度との唯一の違いは、ユーザーの操作に応答しないことです。
例: スタイル「visibility: hidden」を使用して要素を非表示にする

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{width: 100px;height: 100px;background: red;visibility: hidden;}
   .a2{width: 100px;height: 100px;background: yellow;}
  </style>
 </head>
 <body>
  <div class="a1">have a nice day</div>
  <div class="a2">have a nice day</div>
 </body>
</html>

ログイン後にコピー

レンダリング:

CSSを非表示にする方法にはどのようなものがありますか?表示: なし、不透明度: 0、可視性: 非表示の違いは何ですか?