CSSレイアウト - ディスプレイのプロパティ

displayプロパティは、レイアウトを制御するための最も重要なCSSプロパティです。

表示プロパティ

displayプロパティは、要素が表示されている場合は/方法を指定します。

すべてのHTML要素は、それがある要素の種類に応じて、デフォルトの表示値を持っています。ほとんどの要素のデフォルトの表示値はblockまたはinline 。

パネルを表示するにはクリック

このパネルには含まれてい<div>デフォルト（によって隠されている要素、 display: none ）。

これは、CSSでスタイル設定され、我々は（それを表示（にそれを変更するにはJavaScriptを使用してdisplay: block ）。

ブロックレベル要素は常に新しい行で始まり、（左右に限り、それができますように広がって）利用可能な幅全体を占めています。

<div>要素はブロックレベル要素です。

ブロックレベル要素の例：

インライン要素は新しい行で開始し、のみ必要な限り幅を占めていません。

これは、インラインで<span>パラグラフの内部要素。

インライン要素の例：

display: none;一般的にそれらを削除して再作成することなく、要素を非表示にして表示するためにJavaScriptで使用されています。あなたはこれを達成することができる方法を知りたい場合は、このページに私たちの最後の例を見てみましょう。

<script>要素の使用のdisplay: none;デフォルトとして。

述べたように、すべての要素は、デフォルトの表示値を有します。ただし、このメソッドをオーバーライドすることができます。

ブロック要素、またはその逆に、インライン要素を変更し、ページが特定の方法を見て、まだWeb標準を追従させるために有用であり得ます。

一般的な例は、インラインを作っている<li>水平メニューの要素：

li {
display: inline;
}

	注：要素のdisplayプロパティを設定すると、唯一の要素の表示方法を変更し、NOT素子のどのようなことがあります。だから、とインライン要素`display: block;`その中に他のブロック要素を持つことが許可されていません。