ホームページ > 記事 > ウェブフロントエンド > CSSのdisplay:noneとvisible:hiddenの具体的な違いの詳細な説明
CSSのdisplay:noneとvisible:hiddenの具体的な違いの詳細な説明
- 黄舟オリジナル
- 2017-07-24 10:36:332158ブラウズ
display:none は存在せず、ロードされていないものとして扱われます。つまり、物理スペースが非表示オブジェクト用に予約されていません。つまり、オブジェクトがページから完全に消えます。
visibility:hidden 非表示にしますが、閲覧時の位置は保持されます。つまり、オブジェクトが Web ページ上で非表示になりますが、Web ページ上でオブジェクトが占めるスペースは変わりません。
display:none 属性を使用すると、HTML 要素 (オブジェクト) の幅、高さ、その他の属性値が「失われます」。
Visibility:hidden 属性を使用すると、HTML 要素は失われます。 （オブジェクト）は視覚的に見えるだけであり、不可視（完全に透明）ですが、それが占める空間的位置は依然として存在します。つまり、高さや幅などの属性値が残っています。
コードのデモ:
テーブルの初期状態:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title></title></head><body>
<table id="table1" style="border: 2px dashed red;background-color: #e2e2e2;padding: 5px">
<tr>
<td>A1 </td>
<td>A2 </td>
</tr>
<tr>
<td>B1 </td>
<td>B2 </td>
</tr>
</table></body></html>効果は次のとおりです:
style="display:none" をテーブルの 2 行目の tr に追加した後:
表の 2 行目の tr に style="visibility:hidden" を追加した後:
display:none とvisible:hidden はどちらも Web ページ上の要素を非表示にできますが、 2 つの違いは次のとおりです。
display :none --- 非表示のオブジェクト用に物理スペースを予約しません。つまり、オブジェクトはページから完全に消えます。平たく言えば、見ることも触れることもできません。
visible:hidden--- Web ページ上でオブジェクトを非表示にしますが、Web ページ上でオブジェクトが占めるスペースは変化しません。平たく言えば、それは見ることはできませんが、触れることはできることを意味します。
例:
<html> <head> <title>display:none和visible:hidden的区别</title> </head> <body > <span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br /> <span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span> </body> </html>
以上がCSSのdisplay:noneとvisible:hiddenの具体的な違いの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。