インラインブロックのフロントエンドプログラマーならきっと馴染みのある、display 属性の値です。
inline-blockと呼ばれる理由。インライン要素 (inline-element) とブロックレベル要素 (block-element) の両方の特性を備えているためです。
置換された要素 置換された要素
そう言えば、置換された要素について言及する必要があります。 HTML には、次のような特別な要素があります:
||
それらはこれを交換要素と呼びます。これらの要素が一般的なインライン要素 (相対的に非置換要素) と異なるのは、これらの要素が固有の次元 (固有の次元) を持ち、幅/高さの属性を設定できることです。それらのプロパティは、display:inline-block が設定された要素と同じです。上記の 6 つのタグは、最新のブラウザーでは自然なインライン ブロック要素です。
ラッピング
ラッピングの別の言い方は、要素をインラインブロックにすることです。これは、デフォルトでは div の幅が 100% で表示され、position:absolute 属性が div に追加されると、デフォルトの幅 100% がアダプティブ内部要素の幅になることを意味します。そして、次のようなもの:
overflow |position:absolute | float:left/right などにより、要素をインラインブロックしてラッピングを作成できます。
ラッピングには多くの機能がありますが、そのうちの 1 つは、浮動要素をクリアするために使用できることです。
インラインブロックの役割
CSS レイアウトを使用して Web サイトを作成する場合、フローティング はメインコンテンツやサイドバーなどの大きな領域と、その中の小さな領域で必ず大きな割合を占めます。浮遊影を参照してください。ただ、フローティングだと何か問題が起きることが多いのですが、何が問題なのでしょうか?フローティングが唯一の解決策ですか?
フローティングは通常は正常に動作しますが、場合によっては非常に混乱することがあります。特に、一連の画像でフロートを使用した後の位置合わせの問題など、内部コンテナーでフロートを扱う場合に重要です。したがって、インラインブロックは私たちにとって別の選択肢です。このプロパティを使用すると、一部の float によって引き起こされる問題に対処することなく、部分 float の特性をシミュレートできます。
Zhang Xinxu による非常にお勧めの記事は次のとおりです: フローティング レイアウトにさようなら - display:inline-block に基づいたリスト レイアウト。この記事は非常に徹底的に説明しており、インラインブロックを使用するときに解決する必要がある互換性の問題に対する非常に詳細で信頼できる解決策も提供します。
inline-block と float の違い
float の設定には inline-block の設定と似たいくつかの特性がありますが、この 2 つの違いは依然として非常に明白です: