CSS の表示と可視性
display プロパティは要素の表示方法を設定し、visibility プロパティは要素を表示するか非表示にするかを指定します。
要素を非表示にする - display:none または Visibility:hidden
display 属性を「none」に設定するか、visibility 属性を「hidden」に設定して、要素を非表示にします。ただし、これら 2 つの方法では異なる結果が得られることに注意してください。
visibility:hidden は要素を非表示にできますが、非表示の要素は非表示になる前と同じスペースを占有する必要があります。つまり、要素は非表示になっていますが、レイアウトには影響します。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>这是一个明显的标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意,隐藏标题仍然占用空间.</p>
</body>
</html>プログラムを実行して試してください
display:none要素を非表示にすることができ、非表示の要素はスペースを占有しません。つまり、要素が非表示になるだけでなく、その要素が元々占めていたスペースもページ レイアウトから消えます。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
<h1>这是一个明显的标题</h1>
<h1 class="hidden">这是一个隐藏的标题</h1>
<p>注意,display:none 隐藏不占用空间.</p>
</body>
</html>プログラムを実行して試してみてください
CSS表示 - ブロック要素とインライン要素
ブロック要素は、前に改行があり、全幅を占める要素です。以降。
ブロック要素の例:
<h1>
<p>
<div>
インライン要素は必要な幅のみを必要とし、強制的な折り返しは必要ありません。
インライン要素の例:
<span>
<a>
要素の表示を変更する方法
インライン要素とブロック要素を変更したり、その逆を行ったりして、Web 標準に準拠しながらページを特定の方法でまとめて見えるようにすることができます。
次の例は、リスト項目をインライン要素として表示します:
<!DOCTYPE html>
<html>
<head>
<style>
li{display:inline;}
</style>
</head>
<body>
<p>这个链接列表显示为一个水平菜单:</p>
<ul>
<li><a href="" target="_blank">HTML</a></li>
<li><a href="" target="_blank">CSS</a></li>
<li><a href="" target="_blank">JavaScript</a></li>
<li><a href="" target="_blank">XML</a></li>
</ul>
</body>
</html>プログラムを実行して試してください
例
次の例は、span要素をブロック要素として表示します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
</body>
</html>プログラムを実行して、試してみてください
