CSSが表示されない-フロントエンドQ&A-php.cn

CSSが表示されない

PHPz

リリース： 2023-04-21 15:16:19

オリジナル

153 人が閲覧しました

CSS は Web ページを美しくするだけでなく、多くの興味深いインタラクティブな効果も実現します。ただし、CSS には、目に見えないものの非常に重要なスタイルがいくつかあります。この記事では、CSS の非表示のスタイルとそのアプリケーションについて説明します。

1.display:none

display:none は、CSS で最も一般的な非表示スタイルの 1 つです。スペースをとらずに要素を完全に消すことができます。具体的には、display:none を使用すると、要素はレンダリングされず、スペースも占有しないため、ページ上に要素の痕跡は表示されません。

このスタイルは、Web ページの可視性を制御するためによく使用されます。たとえば、Web ページには特定の条件で表示する必要がある機能がいくつかあります。この場合、要素の表示属性を JS を通じて制御して、特定の条件が満たされた場合に表示され、条件が満たされた場合に非表示にすることができます。ない。

2. Visibility:hidden

visibility:hidden は、display:none と似ています。どちらも要素を非表示にすることができます。ただし、visibility:hidden と display:none の違いは、visibility:hidden 要素は非表示であってもスペースを占有するため、ページ上の対応する位置を占める非表示ではあるが既存の要素が存在することです。

このスタイルは、CSS アニメーションに関連する効果を制御するために使用されることがあります。たとえば、フェードインおよびフェードアウトアニメーションを実装する場合、一部の要素の読み込みを遅らせるには、最初にvisibility:hiddenを使用して要素を非表示にし、次に表示する必要があるときにそのvisibilityプロパティをvisibleに変更します。アニメーション効果を得ることができます。

3. 不透明度:0

不透明度:0 も非表示のスタイルです。これにより要素が完全に透明になり、スペースを占有せず、依然として存在します。 display:none や Visibility:hidden とは異なり、このスタイルは要素を透明にしますが、サイズと位置の情報は保持します。

このスタイルは、いくつかのアニメーション効果を実装するときに非常に一般的です。たとえば、不透明から透明へのフェードアウト効果を実装するには、まず要素の不透明度属性を 1 に設定し、次に JS を通じてその不透明度の値を 1 から 0 に動的に変更することで、フェードアウト効果を実現できます。

4. Height:0;width:0

height:0;width:0 は、CSS の目に見えないものの非常に便利なスタイルです。要素を目に見えない静かな存在に変えることができます。上で紹介したスタイルとは異なり、このスタイルは要素を非表示にするだけでなく、要素が占めていたスペースを完全に消去します。

このスタイルは、特定の効果を達成する場合に非常に便利です。たとえば、いくつかのインジケーターや小さなアイコンを実装する場合、最初に空の

要素を定義し、次にその高さと幅を 0 に設定すると、インジケーターやアイコンを表示する必要があるときにそれが非表示の小さなボックスになります。、対応する内容を入力するだけです。

5.position:absolute;top:-9999px;left:-9999px

position:absolute;top:-9999px;left:-9999px これは、要素を完全に隠すことができる CSS の中で最も神秘的な非表示スタイルです。その痕跡は HTML ソースコードにも見ることができます。

このスタイルには多くの使用シナリオがあります。たとえば、一部の Web ページにフローティングポップアップボックスを実装する場合、このスタイルを使用して最初にポップアップボックスを非表示にし、ユーザーがボタンをクリックするかイベントをトリガーしたときにポップアップボックスを表示できます。

上記は、CSS での一般的な非表示スタイルとそのアプリケーションです。これらのスタイルは目に見えませんが、Web 開発において非常に重要な役割を果たし、デザインとインタラクションの柔軟性を高めます。

以上がCSSが表示されないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。