通常の開発プロセスでは、必要な効果を実現するために、特定のシナリオで表示または非表示になるテキストが常に発生します。CSS の表示および可視性の構文では、HTML 要素を非表示にしたり表示したりできます。それらは同じように見えるかもしれませんが、それでも特定の違いがあります。
displayの定義と使用法
display属性は、要素が生成するボックスのタイプを指定します。
説明
この属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。 HTML などのドキュメント タイプの場合、表示を不用意に使用すると、HTML ですでに定義されている表示階層に違反する可能性があるため危険です。 XML の場合、XML にはこの種の階層が組み込まれていないため、すべての表示が絶対に必要です。
可能な値
Value Description
none この要素は表示されません。
block この要素は、この要素の前後に改行を入れて、ブロックレベルの要素として表示されます。
インラインのデフォルト。この要素は、要素の前後に改行のないインライン要素として表示されます。
inline-block インラインブロック要素。 (CSS2.1での新しい値)
list-item この要素はリストとして表示されます。
run-in この要素は、コンテキストに応じてブロックレベル要素またはインライン要素として表示されます。
compact CSS には Compact という値がありますが、広くサポートされていないため、CSS2.1 から削除されました。
マーカー CSS には値マーカーがありますが、広くサポートされていないため、CSS2.1 から削除されました。
table この要素は、ブロックレベルのテーブル (<table> と同様) として表示され、テーブルの前後に改行が入ります。
inline-table この要素は、表の前後に改行を入れずに、インライン表 (<table> と同様) として表示されます。
table-row-group この要素は、1 つ以上の行のグループとして表示されます (<tbody> と同様)。
table-header-group この要素は、1 つ以上の行のグループとして表示されます (<thead> と同様)。
table-footer-group この要素は、1 つ以上の行のグループとして表示されます (<tfoot> と同様)。
table-row この要素はテーブル行として表示されます (<tr> と同様)。
table-column-group この要素は、1 つ以上の列のグループとして表示されます (<colgroup> と同様)。
table-column この要素はセルの列として表示されます (<col> と同様)
table-cell この要素は表のセルとして表示されます (<td> および <th> と同様)
table -caption この要素は表のタイトルとして表示されます (<caption> と同様)
inherit は、表示属性の値が親要素から継承される必要があることを指定します。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
.inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}
.block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
.inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
<body>
<span class="inline">
inline
</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>
</html>visibility の定義と使用法
visibility 属性は、要素が表示されるかどうかを指定します。
ヒント: 非表示の要素であってもページ上のスペースを占めます。 「display」属性を使用して、ページ領域を占有しない非表示の要素を作成します。
説明
この属性は、要素によって生成される要素ボックスを表示するかどうかを指定します。これは、要素がまだ元のスペースを占めていますが、完全に非表示になる可能性があることを意味します。値の折りたたみは、テーブル レイアウトから列または行を削除するためにテーブルで使用されます。
可能な値
値 説明
visible デフォルト値。要素が表示されます。
隠し要素は表示されません。
collapse テーブル要素で使用すると、この値は行または列を削除できますが、テーブルのレイアウトには影響しません。行または列によって占められていたスペースは、他のコンテンツのために解放されます。この値が他の要素で使用される場合、「非表示」として表示されます。
inherit は、visibility 属性の値が親要素から継承される必要があることを指定します。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
.visibilityHidden { visibility: hidden; }
.visibilityVisible { visibility: visible; }
</style>
<body>
<!-- 注意第一个图片虽然隐藏了，但是位置还是被占据的 -->
<p>
<a href="#" class="visibilityHidden">
<img src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
<p>
<a href="#" class="visibilityHidden">
<img class="visibilityVisible" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
</body>
</html>CSS 表示 - ブロック要素とインライン要素
ブロック要素は、前後に改行が入った全幅を占める要素です。
ブロック要素の例:
<h1>
<p>
<div>
インライン要素には必要な幅のみが必要であり、改行は強制されません。
インライン要素の例:
<span>
<a>
要素の表示を変更する方法
インライン要素とブロック要素を変更でき、またその逆も可能です。ページの外観を特定の方法でまとめており、Web 標準に準拠しています。
次の例は、リスト項目をインライン要素として表示します:
li {display:inline;}
次の例は、span 要素をブロック要素として表示します:
span {display:block ;}
注: 要素の表示タイプを変更して、要素がどのように表示されるか、および要素の種類を確認します。たとえば、display:block に設定されたインライン要素の内部にネストされたブロック要素を含めることはできません。
次のセクション