ホームページ > 記事 > ウェブフロントエンド > [HTML/CSS]display:noneとvisibility:hidden_html/css_WEB-ITnoseの違い
[HTML/CSS]display:noneとvisibility:hidden_html/css_WEB-ITnoseの違い
- WBOYオリジナル
- 2016-06-24 11:49:511398ブラウズ
前に書いてください
グループの友人がそのような質問をしました。display:none タグはレイアウトに影響します。これがこの記事の問題につながりますが、私の印象では、display:none を持つブロック要素は位置を占めていません。
例
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title></head><body> <div style="width:100%;height:200px;border:1px solid red;">第一个层</div> <div style="width:100%;height:200px;border:1px solid black;">第二个层</div></body></html>
結果を参照
最初のレイヤーにスタイルの可視性を設定します
<div style="width: 100%; height: 200px; border: 1px solid red; visibility: hidden;">第一个层</div> <div style="width:100%;height:200px;border:1px solid black;">第二个层</div>
結果を参照します
次に、最初のレイヤーを display:none に設定しますレイヤースタイル
上記の比較を通じて、display:none はブロック要素を非表示にすることができ、その位置を占有できないこともわかります。 Visibility: hidden はブロック要素を非表示にしますが、それでも位置を占めます。
概要
1. display:none: 要素は非表示であり、位置を占めません。
2. Visibility:hidden: 要素は非表示になり、その位置を占めます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。