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

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

WBOY

リリース： 2016-06-24 12:30:57

オリジナル

1236 人が閲覧しました

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 の対応するコード: