30

1 対 1 の比較で一部の表示プロパティの詳細が説明されていることに気付きましたが、違いを説明する際に説明されていないものがかなりあります。誰かがさまざまな inline- something表示タグの違いを説明できますか?

w3schools のような場所に対するより精巧な定義は、驚くべきことです。

4

1 に答える 1

32

ブロック バリアントとインライン バリアントを持つ表示タイプの唯一の違いは、inline-*表示タイプではボックスがインライン (つまり、インライン フォーマット コンテキスト) に配置されているのに対し、もう一方の表示タイプではボックスがブロック レベルのボックスとしてフォーマットされていることです。ブロック フォーマット コンテキスト内の他のブロック レベル要素と同じフォーマット規則の. ブロック レベル ボックスとインライン レベル ボックスの違いについては、別の場所で詳しく説明されています。

ボックスがその内容をどのようにレイアウトするかに関するすべてはほとんど同じです (もちろん、その詳細は表示タイプ自体によって制御されます)。その他の微妙な違いは、仕様に明示的に記載されています。私の知る限り、実際にはそのような違いはありません。

判断に迷う場合は、ブロック レベルの表示タイプを優先してください。インライン レベルが適切かどうかを自問する場合、おそらく答えはノーです。特定のシナリオでは、絶対配置やフローティングなど、ボックスをインライン レベルのボックスとしてフォーマットすることを妨げたり、代わりにフレックス アイテムやグリッド アイテムとしてフォーマットしたりすることができない場合があります。inline-*その結果、バリアントから通常のブロック バリアントへの直接変換が行われます。つまり、 、、、、に変換inline-blockされます。繰り返しますが、これは要素のコンテンツがどのようにフォーマットされるかには直接影響しません。仕様に関する限りではありません。blockinline-tabletableinline-flexflexinline-gridgrid

各表示タイプとそれに対応するインライン レベルの例を以下に示します。

CSS2.1 では、セクション 9.2.4で次のように記述さblockれinline-blockています。

block
この値により、要素はブロック ボックスを生成します。

inline-block
この値により、要素はインライン レベルのブロック コンテナーを生成します。インライン ブロックの内部はブロック ボックスとしてフォーマットされ、要素自体はアトミック インライン レベル ボックスとしてフォーマットされます。

「ブロック ボックス」は「ブロック レベル ブロック コンテナー」の省略形であり、ブロック コンテナーはブロック レベル ボックスを格納できるものであることに注意してください。

これら 2 つの値の両方によって、要素がブロック コンテナー ボックスを生成することがわかります。その内容は常に同じ一連の書式設定ルールに従いますが、ブロック コンテナー ボックス自体はブロック レベルまたはインラインとして書式設定されます。レベル。

と の間には、もう 1 つの違いがblockありinline-blockます。インライン ブロック ボックスは、常に新しいブロック フォーマット コンテキストを確立します。ブロック ボックスは、一連の条件下でのみそうします。これは、ブロック レベルとインライン レベルの対応する他の表示タイプには当てはまりません。

セクション 17.2では、次のように説明tableしinline-tableています。

table (HTML では、TABLE)
要素がブロック レベルのテーブルを定義することを指定します。これは、ブロック フォーマット コンテキストに参加する長方形のブロックです。

inline-table (HTML では、TABLE)
要素がインライン レベルのテーブルを定義することを指定します。これは、インライン フォーマット コンテキストに参加する長方形のブロックです)。

Flexbox モジュールでは、次のように記述さflexれinline-flexています。

flex
この値により、要素はブロック レベルのフレックス コンテナー ボックスを生成します。

inline-flex
この値により、要素はインライン レベルのフレックス コンテナ ボックスを生成します。

また、グリッド レイアウト モジュールでは、次のように記述さgridれinline-gridています。

grid
この値により、要素はブロック レベルのグリッド コンテナー ボックスを生成します。

inline-grid
この値により、要素はインライン レベルのグリッド コンテナー ボックスを生成します。

繰り返しになりますが、これらすべてのシナリオで、テーブル、フレックス コンテナー、またはグリッド コンテナーは、ブロック レベルであろうとインライン レベルであろうとまったく同じように動作します。フレックス コンテナは常にフレックス アイテムのフレックス フォーマット コンテキストを確立し、グリッド コンテナはグリッド アイテムのグリッド フォーマット コンテキストを常に確立します。

于 2014-06-19T18:21:46.637 に答える