DIV CSS 表示の使用法 (ブロックなしインライン)attribute_html/css_WEB-ITnose

1. CSS 表示の使用
以下は DIV CSS での dispaly の使用であり、ここでの表示値が任意であることを示します
CSS コード:
.divcss5{display:none}
対応する Html アプリケーション:

I テスト内容です

上記によると、自分でDIV+CSSを使用して結果を見ることができます

2.display
Cssの値は何ですか?表示値と説明 - (詳しくはCSSマニュアルのCSS表示マニュアルをご覧ください)
パラメータ :

block :ブロックオブジェクトのデフォルト値。この値を使用して、オブジェクトの後に新しい行を追加します。
none: オブジェクトを非表示にします。可視性属性の非表示値とは異なり、非表示オブジェクトの物理スペースは保持されません。
inline: インライン オブジェクトのデフォルト値。オブジェクトから行を削除するには、この値を使用します。
compact: コンテンツに基づいてオブジェクトをブロック オブジェクトまたはインライン オブジェクトとして割り当てます。
marker: コンテナ オブジェクトの前後にコンテンツを指定します。このパラメータを使用するには、オブジェクトを :after および :before 疑似要素とともに使用する必要があります。
inline-table: テーブルを改行なしのインライン オブジェクトまたはインライン コンテナとして表示します。
list-item: ブロック オブジェクトを指定します。リスト項目。オプションのプロジェクト フラグを追加できます
run-in: コンテンツに基づいてオブジェクトをブロック オブジェクトまたはインライン オブジェクトとして割り当てます
table: オブジェクトをブロック要素レベルでテーブルとして表示します
table-caption: オブジェクトを次のように表示します表のタイトル
table-cell: オブジェクトを表のセルとして表示
table-column: オブジェクトを表の列として表示
table-column-group: オブジェクトを表の列グループとして表示
table-header-group: 表示オブジェクトをテーブルヘッダーグループとして表示します
table-footer-group: オブジェクトをテーブルフッターグループとして表示します
table-row: オブジェクトをテーブル行として表示します
table-row-group: オブジェクトをテーブル行グループとして表示します

3. CSS 表示ブロック
Display:block 弊社でよく使用するもので、Display のデフォルト値も block です。
説明: このオブジェクトの後続のコンテンツは自動的にラップされます。
CSS 表示ブロックの例
CSS コード:
.divcss5{display:block}

Html 対応するアプリケーション コード:
次のテキストは折り返されます I が先行しました The divcss5 CSS プロパティのラッピングに対応します。
はdisplay:blockを設定していないためラップされません

対応する結果のスクリーンショット:

説明:ここではspanが例として使用されており、1つはCSSスタイルで設定されており、もう1つは設定されていない場合は、自分で比較できます。 DIV 表示:ブロック スタイルに設定されたオブジェクトの後続のコンテンツはラップされます。

4. CSS 表示 none
この表示の none 値は、オブジェクトのコンテンツを非表示にするためによく使用されます。非表示のオブジェクトは、固有の幅と高さのスペースを占有しません。
詳細については、CSS 非表示の説明を参照してください: http://www.divcss5.com/jiqiao/j55.html

5. CSS のインライン表示
Display:inline は、li でよく使用されます。この機能は、li を行に並べることです (行の削除と呼ばれます)。
次に、未設定の li リストと設定された css 表示インライン スタイルの比較を示します。

Css コード
ul.divcss5 li{display:inline}
説明: ul.divcss5 は li CSS スタイル属性が display:inline に対応します

Html の対応するコード:

• 私の親 ul はそうしますdivcss5 スタイルを持っていません


• 私は一人で歩いています


• 私は一人で歩いています

• 私の親 ul は divcss5 スタイルです


• 私は一列に並んでいます


• 私は divcss5 の下に一列に並んでいます
/ul>

デモ結果画像:


説明: display:inline の li オブジェクトに css を設定すると、li オブジェクトは一列に配置され、設定されていない li リスト オブジェクトは独自の行の元の CSS スタイルを継承します。 。