ホームページ > 記事 > ウェブフロントエンド > 表示属性の深い理解_html/css_WEB-ITnose
表示属性の深い理解_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:26:181351ブラウズ
ディレクトリ [1]ブロック [2]インライン [3]インラインブロック [4]なし [5]リストアイテム [6]ランイン [7]テーブル [8]インラインテーブル [9]テーブル- cell [10]table-caption
前の言葉
display属性はWebページのレイアウトでは非常に一般的ですが、よく使われるのはblock、inline-block、inline、noneなどの少数の属性値だけです。この記事では、表示のさまざまな側面について詳しく説明します
定義
表示属性は、表示方法に影響を与える、要素によって生成されるボックスのタイプを指定するために使用されます
値: none | inline-block | | テーブル項目 | テーブル行グループ | テーブル行グループ | | table-caption | 継承
初期値: 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>06669983c3badb677f993a8c29d18845a34de1251f0d9fe1e645927f19a896e8581cdb59a307ca5d1e365becba940e05879b49175114808d868f5fe5e24c4e0b
table の４つのタグに対応する表示属性を以下に紹介します。
[1] 幅が設定されていない場合、内容によって幅が引き伸ばされます
[2] 1行を占有します
[3] 幅と高さをサポートします
[4] デフォルトでテーブルの特性を持ち、とテーブルを設定できます - レイアウト、ボーダーコラプス、ボーダースペースなどのテーブル固有のプロパティ
inline-table
【機能】[1] 幅が設定されていない場合、幅はコンテンツによって引き伸ばされる
[2] 1行で非排他的
[3] 幅と高さをサポート [4] デフォルトでテーブル機能があり、table-layout、border-collapse、border-spacingを設定できますその他のテーブル固有の属性
table-cell
【機能】[1] 幅が設定されていない場合、幅はコンテンツによって拡張されます
一 [2]の非独占ライン
[3] ワイドハイ対応
[4] 縦並び [5] 同レベルのハイ
[特徴] [ 1] 幅が設定されていない場合は、内容によって幅が拡張されます
[2] 1行のみ
[3] 幅と高さをサポートします
注意事項
【1】要素が絶対的なものである場合位置指定要素の場合、 float の値は none に設定され、浮動要素または絶対位置指定要素の場合、計算値は宣言された値によって決まります
【2】ルート要素の場合、値が inline として宣言されている場合、 table または table の場合、計算値 table が取得されます。none として宣言した場合も同様です。計算値は none であり、その他の表示値はすべてブロックとして計算されます
🎜