CSS 表示属性のインラインブロックレイアウト実装の詳細な説明

CSS 表示プロパティ

注: !DOCTYPE が指定されている場合、Internet Explorer 8 (およびそれ以降) は、プロパティ値 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、および "inherit" をサポートします。すべての主要ブラウザは display プロパティをサポートしています。

定義と使用法

display プロパティは、要素が生成するボックスのタイプを指定します。

例示する

この属性は、レイアウトを構築するときに要素が生成する表示フレームのタイプを定義するために使用されます。 HTML などのドキュメント タイプの場合、display を使用すると、HTML で定義された display 階層に違反する可能性があるため、注意しないと危険です。 XML にはそのような階層が組み込まれていないため、すべての表示が絶対に必要です。

注: compact と marker の値は CSS2 に存在していましたが、広範囲にわたるサポートがないため CSS2.1 から削除されました。

1. display、inline、block、inline-blockの一般的な属性値を説明する

インライン（インライン要素）：インライン要素の特性を持ち、つまり、他のインライン要素とラインを共有することができ、要素の高さと幅を占有することはできません。ブロックレベルの要素には、独自の幅が設定されていない場合、デフォルトでは、パディングとマージンのさまざまな属性値を設定できます。上記のブロックの特性。レイマンの用語では、それだけではブロックレベルの要素です。図示のとおり:

図1:

図2:

2 つの図から、display: inline-block の後、ブロック レベル要素を同じ行に表示できることがわかります。これはフローティングと同じだと言う人もいます。はい、display: inline-block の効果は float とほぼ同じですが、違いもあります。次に、inline-block と float の比較について説明します。

2. インラインブロックレイアウトとフローティングレイアウト

a. 違い: display: inline-block が要素に設定されている場合、要素はテキストフローから分離されませんが、float は要素をテキストフローから分離し、親要素の高さを縮小する効果もあります。

b. 類似点: ある程度同じ効果を達成できる

次の 2 つのレイアウトを見てみましょう。

図1: 表示: インラインブロック

図 2: 2 つの子に float:left を使用します。前回のフローティング レイアウトに関する記事で、親要素の高さが縮小されるため、フロートを閉じてボックスに overflow:hidden を使用する必要があると述べました。効果は次のとおりです。

>>一見すると、どちらもほぼ同じ効果が得られます。(以下で説明する display: inline-block のギャップの問題に注意してください)

c. フローティングレイアウトのデメリット：不均一性。効果を見てみましょう。

図3:

図4:

>>図 3 と図 4 から、フローティングの制限は、要素が行を埋めて改行後にきちんと配置される場合、子要素の高さが一貫している必要があることです。そうでない場合、図 3 に示す効果は表示されますが、インライン ブロックでは表示されません。

3. インラインブロックに関する小さな問題:

a. 上記のように、display:inline-block を使用した後、4 ピクセルのギャップの問題が発生しています。この問題は改行によって発生します。タグを記述する場合、通常、タグ終了文字の後にキャリッジ リターンをヒットします。キャリッジ リターンは、空白文字に相当するキャリッジ リターン文字を生成します。通常、連続する複数の空白文字は 1 つの空白文字に結合されますが、"空白ギャップ" の本当の原因は、あまり注意を払わないこの空白文字です。

b. ギャップを除去する方法:
1. 親要素に {font-size:0} を追加して、フォント サイズを 0 に設定します。すると、空白文字も 0px になり、ギャップがなくなります。

現在、この方法はさまざまなブラウザと互換性がありますが、以前は Chrome とは互換性がありませんでした。

図1:

c. ブラウザの互換性: IE6/7 は display: inline-block と互換性がないため、追加の処理が必要です。
IE6/7の場合:
インライン要素の場合は、{dislplay:inline-block;}を直接使用します。
ブロックレベル要素の場合: {display:inline;zoom:1;} を追加します。

4. 要約:

表示: インラインブロックレイアウトとフローティングレイアウトのどちらを使用するかは、実際の状況に応じて決定する必要があると思います。
a. 水平方向の配置の場合、レイアウトには inline-block を使用することをお勧めします。これは、より明確であり、float のようにフロートをクリアする必要がなく、レイアウトの混乱などを心配する必要がないためです。
b. フローティングレイアウトの場合、テキストの折り返しが必要な場合に使用します。結局のところ、フローティングが本当に役立つのはここです。水平方向の配置は inline-block に任せます。