表示属性の深い理解_html/css_WEB-ITnose-htmlチュートリアル-php.cn

表示属性の深い理解_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:26:18

オリジナル

1425 人が閲覧しました

ディレクトリ [1]ブロック [2]インライン [3]インラインブロック [4]なし [5]リストアイテム [6]ランイン [7]テーブル [8]インラインテーブル [9]テーブル- cell [10]table-caption

前の言葉

display属性はWebページのレイアウトでは非常に一般的ですが、よく使われるのはblock、inline-block、inline、noneなどの少数の属性値だけです。この記事では、表示のさまざまな側面について詳しく説明します

定義

表示属性は、表示方法に影響を与える、要素によって生成されるボックスのタイプを指定するために使用されます

初期値: inline [ 1 ] 幅が設定されていない場合は 1 行いっぱいになります

[2] 1 行のみ

[3] 幅と高さをサポートします

【ラベル】

<address><article><aside><blockquote><body><dd><details><div><dl><dt><fieldset><figcaption><figure><footer><form><h1><header><hgroup><hr><html><legend><menuitem><nav><ol><optgroup><option><p><section><summary><ul>

ログイン後にコピー

【注意】menuitemタグはfirefoxでのみサポートされています

【サポートされていないスタイル】

[1]vertical-align

inline

【特徴】

[ [1]コンテンツのスプレッド幅

[2]非排他行

[3]幅と高さをサポートしません [4]コードの改行はスペースに解析されます

【タグ】

<a><abbr><area><b><bdi><bdo><br><cite><code><del><dfn><em><i><ins><kbd><label><map><mark><output><pre class="brush:php;toolbar:false"><q><rp><rt><ruby><s><smap><small><span><strong><sub><sup><time><u><var><wbr>

ログイン後にコピー

【サポートされていないスタイル】

[1]background-position

[2]clear

[4]height | min-height

[5]max-width | min-width

[6]overflow

[7]text-align

inline-block

【機能】

[1] 幅が設定されていない場合、コンテンツは幅を拡張します

[2] 非排他行

[3] 幅と高さをサポート

[4] コードの改行はスペースに解析されます

【タグ】

<audio><button><canvas><embed><iframe><img><input><keygen><meter><object><progress><select><textarea><video>

ログイン後にコピー

【サポートされていないスタイル】

[1 ]clear

[2]text-align

none

【機能】

要素の非表示とドキュメントフロー

【タグ】

<base><link><meta><title><datalist><dialog><param><script><source><style>

ログイン後にコピー

リストアイテム

【特徴】

[1] 幅が設定されていない場合、幅は1行で埋められます

[2] 専用ライン

[3] 幅と高さをサポート

ランイン

ランインはブロック要素とインライン要素の興味深い組み合わせ。これにより、特定のブロックレベル要素が次の要素のインライン部分になる可能性があります。要素がランインボックスを生成し、そのボックスの後にブロックレベルボックスが続く場合、ランイン要素はブロックレベルボックスの先頭のインラインボックスになり、ランインボックスは次のようにフォーマットされます。別の要素内のインラインボックスですが、ドキュメント内の親要素から属性を継承します

[注意] safari と IE8+ のみがサポートします

<h3 style="display:run-in">run-in test</h3><p>paragraph</p>

ログイン後にコピー

run-in ボックスの後にブロックが続かない場合レベルボックス、ランインボックス自体はブロックレベルボックスになります Box

<span style="display:run-in">run-in test</span><span>paragraph</span>

ログイン後にコピー

Table 要素

table{display: table;}thead{display: table-header-group;}tbody{display: table-row-group;}tfoot{display: table-footer-group;}tr{display: table-row;}td,th{display: table-cell;}col{display: table-column;}colgroup{display: table-column-group;}caption{display: table-caption;}

ログイン後にコピー

table 要素の表示には次の種類があります。 tbody>

table の４つのタグに対応する表示属性を以下に紹介します。

[1] 幅が設定されていない場合、内容によって幅が引き伸ばされます

[2] 1行を占有します

[3] 幅と高さをサポートします

[4] デフォルトでテーブルの特性を持ち、とテーブルを設定できます - レイアウト、ボーダーコラプス、ボーダースペースなどのテーブル固有のプロパティ