Css-display

提供:Dev Guides
移動先:案内検索

CSS-ディスプレイ

説明

_display_プロパティは、要素の最も基本的な表示に影響を与え、要素を特定のタイプの要素として効果的に分類します。 要素のレンダリングは表示タイプに大きく依存する場合があり、特定のプロパティは特定の表示値を持つ要素でのみ機能します。

可能な値

  • inline -この値により、要素はインラインレベルのボックスを生成します。たとえば、HTML要素のSTRONG、CODE、またはEM(など)。 要素は、表示時に1つ以上のインラインボックスを生成します。
  • block -この値により、要素はブロックレベルのボックスを生成します。たとえば、HTML要素P、H1、またはPRE(など)。 要素は、表示されるとブロックボックスを生成します。
  • list-item -この値により、要素はブロックボックスとリスト項目インラインボックスの両方を生成します。 HTMLでは、LI要素はそのような要素の唯一の例です。
  • run-in -特定の条件下では、この値により要素が挿入されます。 次の要素の先頭に。 要素Aがdisplay:run-inに設定され、その後にブロックレベルの要素Bが続く場合、AはBの最初のインラインレベルボックスになります。 Aに続く要素がブロックレベルではない場合、Aはブロックレベルのボックスになります。
  • コンパクト-特定の条件下では、この値により要素が次の要素の片側に配置されます。
  • marker -この値は、生成されたコンテンツをマーカーに設定します。したがって、ブロックレベル要素に設定されている場合、:beforeおよび:after擬似要素と組み合わせてのみ使用する必要があります。
  • table -この値により、要素はブロックレベルのテーブルボックスを生成します。 これは、HTML要素TABLEに類似しています。
  • inline-table -この値により、要素はインラインレベルのテーブルボックスを生成します。 HTMLには類似物はありませんが、テキスト行の中央に表示できる従来のHTMLテーブルとして想定できます。
  • table-cell -この値は、要素がテーブルセルであることを宣言します。 これは、HTML要素TDに類似しています。
  • table-row -この値は、要素がテーブルセルの行であることを宣言します。 これは、HTML要素TRに類似しています。
  • table-row-group -この値は、要素がテーブル行のグループであることを宣言します。 これは、HTML要素のTBODYに類似しています。
  • table-column -この値は、要素がテーブルセルの列であることを宣言します。 これは、HTML要素のCOLに類似しています。
  • table-column-group -この値は、要素がテーブル列のグループであることを宣言します。 これは、HTML要素のCOLGROUPに類似しています。
  • table-header-group -この値は、テーブルの最上部に常に表示されるセルのグループである要素を宣言し、行または行グループの前で、上部に配置されたテーブルキャプションの後に配置されます。 これは、HTML要素THEADに類似しています。
  • table-footer-group -この値は、行または行グループの後、下揃えのテーブルキャプションの前に配置され、テーブルの下部に常に表示されるセルのグループであることを宣言します。 これは、HTML要素TFOOTに類似しています。
  • table-caption -この値は、要素がテーブルのキャプションであることを宣言します。 これは、HTML要素のCAPTIONに類似しています。
  • none -要素はボックスをまったく生成しないため、表示されず、ドキュメントのレイアウトにも影響しません。

に適用されます

すべてのHTML要素。

DOM構文

object.style.cueAfter = url("music.wav");

ここに例があります-

<p style = "display:inline;">
   This paragraph will inline with the next paragraph
</p>

<p style = "display:inline;">
   and will make a single line.
</p>

<br/>
<br/>

<div style = "display:block;">
   This paragraph will be separate from the next paragraph
</div>

<div style = "display:block;">
   and this is second paragraph.
</div>

これにより、次の結果が生成されます–

This paragraph will inline with the next paragraph


and will make a single line.




This paragraph will be separate from the next paragraph


and this is second paragraph.