ホームページ > 記事 > ウェブフロントエンド > CSS_Basic チュートリアルでの表示と可視性の違いを解決する
CSS_Basic チュートリアルでの表示と可視性の違いを解決する
- WBOYオリジナル
- 2016-05-16 12:08:492042ブラウズ
ほとんどの人は、CSS プロパティの表示と可視性を簡単に混同します。これらは同じように見えますが、実際には大きく異なります。
visibility 属性は、要素が表示されるか非表示になるかを決定するために使用され、visibility="visible|hidden" で表されます (visible は表示されることを意味し、hidden は非表示を意味します)。
可視性が「非表示」に設定されている場合、要素は非表示になりますが、元の位置を占めます。例:
[Ctrl A すべて選択 注:外部 Js を導入する必要がある場合は、実行するために更新する必要があります]
要素が非表示になっている場合は、実行できないことに注意してください。したがって、最初のコードで「非表示」に設定すると、応答イベントを受信できなくなるため、最初のテキスト上でマウスをクリックしても表示されなくなります。
一方、表示属性は少し異なります。可視性属性は要素を非表示にしますが、その浮動位置は維持しますが、表示は実際に要素の浮動特性を設定します。
表示がブロックに設定されている場合、コンテナ内のすべての要素は、その時点でページに配置される
要素と同様に、単一のブロックとして扱われます。 (実際には、
のように動作するように、 の display:block を設定できます。
表示をインラインに設定すると、要素がインラインであるかのように動作します ---
表示をインラインに設定すると、要素がインラインであるかのように動作します ---
のような通常のブロック要素であっても、また、 のような出力ストリームに結合されます。
以下の例のコードと効果を見てください:
[Ctrl A すべて選択 注:外部 J を導入する必要がある場合は、実行する前に更新する必要があります]
同時に、 display:inline; と float:left; の違い この記事を参照してください:
(display は表示状態を指し、inline はインラインを意味し、前の inline 要素に近いという特徴があります。通常、デフォルトの inline 要素これには、span、a、em、strong などが含まれます。および float これは float、float:left を表します。これは、ブロック レベル要素の浮動形式であり、異なる形式の 2 つの状態です。)
http://www.andymao .com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html
以下の例のコードと効果を見てください:
[Ctrl A すべて選択 注:外部 J を導入する必要がある場合は、実行する前に更新する必要があります]
同時に、 display:inline; と float:left; の違い この記事を参照してください:
(display は表示状態を指し、inline はインラインを意味し、前の inline 要素に近いという特徴があります。通常、デフォルトの inline 要素これには、span、a、em、strong などが含まれます。および float これは float、float:left を表します。これは、ブロック レベル要素の浮動形式であり、異なる形式の 2 つの状態です。)
http://www.andymao .com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。