インライン要素にブロック要素としてスタイル設定された子要素が含まれている場合、インライン要素の動作はどのように変化しますか。また、親要素がブロック要素として定義されているシナリオとどのように異なりますか。

display:block display:inline 内

CSS の世界では、インライン要素は通常、流れていくテキストの塊として動作します。ブロック要素は新しい行を開始します。ただし、インライン要素にブロック要素としてスタイル設定された子要素が含まれる場合、インライン要素の動作はより複雑になります。

CSS 2.1 仕様で説明されている次のシナリオを考えてみましょう。

<code class="css">body { display: inline }
p    { display: block }</code>

この例ではこの場合、body要素にはdisplay: inlineスタイルがあり、その子要素pにはdisplay: blockスタイルがあります。この組み合わせにより、最初はインラインとして定義されていた body 要素がブロック要素のように動作するように見える独特の状況が作成されます。

ブロックレベルの p 要素の存在により、body 要素が匿名のブロック ボックスに分割されます。テキストコンテンツの周囲 (p の前の C1 と p の後の C2)。 p 要素は、これらの匿名ボックスの兄弟になります。

視覚的には、結果のボックスは次のように表すことができます:

+- anonymous block box around body ---+
| +- anonymous block box around C1 -+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- P block box -------------------+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- anonymous block box around C2 -+ |
| |                                 + |
| +---------------------------------+ |
+-------------------------------------+

この動作は、body 要素が次のように定義されているシナリオとは異なります。ブロック要素 (表示: ブロック)。ブロック要素の場合、本文のテキスト コンテンツは、匿名のボックスに分割されるのではなく、本文要素自体の中に囲まれます。

+--------------------------------------+
| This is anonymous text before the P. |
|                                      |
| This is the content of P.            |
|                                      |
| This is anonymous text after the P.  |
+--------------------------------------+

2 つのケースの主な違いの 1 つは、プロパティを適用することです。匿名のブロックボックス。 CSS 2.1 仕様では、匿名ブロック ボックスを生成する要素に設定されたプロパティは、引き続きそれらのボックスとそのコンテンツに適用されると規定されています。これは、ボーダーやパディングなどのプロパティが、インライン要素によって作成された匿名ボックスに適用されることを意味します。

要約すると、ブロック要素を含むインライン要素はブロック要素と同様に動作するように見えますが、次のような点があります。プロパティの適用方法とレイアウトのレンダリング方法に微妙な違いがあります。 CSS 2.1 仕様では、これらの違いについて詳細な説明が提供されており、開発者が Web ページ内のそのような要素の動作を理解するのに役立ちます。

以上がインライン要素にブロック要素としてスタイル設定された子要素が含まれている場合、インライン要素の動作はどのように変化しますか。また、親要素がブロック要素として定義されているシナリオとどのように異なりますか。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。