CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS表示の違い：なし。と可視性：非表示。

CSS表示：なし;

display：noneプロパティは、要素を削除せずに非表示にするために使用されます。スペースを取りません。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h3 {
            display: none;
         }
      </style>
   </head>
   <body>
      <h2>This heading is visible</h2>
      <h3>This is a hidden heading</h3>
      <p>The hidden heading does not take up space even after hiding it since we have used display: none;.</p>
   </body>
</html>

CSSの可視性：非表示;

可視性：hiddenプロパティも要素を非表示にしますが、レイアウトに影響します。つまり、スペースを占有します。例を見てみましょう

<!DOCTYPE html>
<html>
   <head>
      <style>
         h3 {
            visibility: hidden;
         }
      </style>
   </head>
   <body>
      <h2>This heading is visible</h2>
      <h3>This is a hidden heading</h3>
      <p>The hidden heading takes up space even after hiding it.</p>
   </body>
</html>

  1. CSSで使用して表示なし

    CSS Display Noneは、開発者がdisplayプロパティがnoneに設定されている要素を非表示にするのに役立ちます。表示がnoneに設定されている要素の場合、ボックスは生成されません。また、displayがnone以外の値に設定されている可能性のある子要素も生成されません。 構文 CSS表示なしの構文は次のとおりです- Selector {    display: none; } 例 CSS表示なしの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>CSS Disp

  2. CSSの疑似クラスと疑似要素の違い

    疑似クラス 疑似クラスは、：hover、：active、：last-childなどのセレクターの状態を表します。これらは単一のコロン（:)で始まります。 CSS疑似クラスの構文は次のとおりです- :pseudo-class{ attribute: /*value*/ } 疑似要素 同様に、疑似要素は、::after、::before、::first-lineなどの仮想要素を選択するために使用されます。 これらは二重コロン（::）で始まります。 CSS疑似要素の構文は次のとおりです- ::pseudo-element{ attribute: /*value*/ } 例 次