CSS 表示と可視性
要素を非表示にする - display:none または Visibility:hidden
display 属性は要素の表示方法を設定し、visibility 属性は要素のプロパティの可視性を設定します。 .display:none はスペースを占有しませんが、visibility:hidden は要素が非表示であっても同じスペースを占有します。
ブロックレベルの要素の特徴は、通常の幅を占有し、div などの強制改行が行われることです。 p、h1
インライン要素のみ必要な幅を占め、span、aなどの改行は強制しません
span{display:block;}やli{など、2つの要素の表示モードを相互に変更できますdisplay:inline;}
visibility 属性値は非表示にすることも、表示することも折りたたむこともできます。collapse 属性を使用すると、テーブルのレイアウトに影響を与えることなくテーブルの行または列を非表示にすることができ、非表示の要素の位置を
CSS 表示 - ブロック要素とインライン要素
ブロック要素は、幅全体を占め、前後に改行が続く要素です。
ブロック要素の例:
<h1>
<p>
<div>
インライン要素には必要な幅のみが必要であり、改行は強制されません。
インライン要素の例:
<span>
<a>
要素の表示を変更する方法
インライン要素とブロック要素を変更でき、またその逆も可能で、ページの外観を変更できます特定の方法で組み合わせたもののように、Web 標準に準拠しています。
次の例では、span 要素をブロック要素として使用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>标题</h2>
<span>这是一段内容</span>
<span>这也是一段内容</span>
<h2>标题</h2>
<span>内容</span>
<span>也是内容</span>
</body>
</html>注: 要素の表示タイプを変更して、要素がどのように表示されるか、また要素の種類を確認します。たとえば、display:block に設定されたインライン要素の内部にネストされたブロック要素を含めることはできません。
次のセクション