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>
レンダリング:
可視性属性は、要素が表示されます。値を 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>
レンダリング:
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>
レンダリング:
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>
レンダリング:
位置: 絶対、要素を非表示に設定します 主な原則は、上と左を設定することです十分な大きさの要素を指定します。負の数を指定すると、画面上で非表示になります。
2. 違い
1. 可視性: 非表示
要素は非表示になりますが、消えることはなく、引き続きスペースを占有します。
は非表示にした後も子孫に継承され、visible を設定することで再表示することもできます。
はこのイベントをトリガーしません。このプロパティを動的に変更すると再描画が発生します。
2. 不透明度:0
透明度のみが 100% であり、要素は非表示になっていますが、依然としてスペースを占有します。
は非表示にしても元の HTML スタイルは変更されず、子要素は継承されません。 opacity=1 Hidden によって反転されます。
opacity:0 の要素でもバインドされたイベントをトリガーできます。
3. display:none
はスペースを占有せず、要素を非表示にするため、この属性を動的に変更すると再配置 (ページ レイアウトの変更) が発生します。これは、ページから要素を削除することと理解できます。子孫があっても、それらはすべて一緒に隠されているため、その子孫は表示されません。
以上がCSSでページ要素を非表示にする方法は? CSS隠し要素の4つの実装方法とその違い(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。