`` 要素の表示プロパティは、匿名ブロック ボックスの動作とその中のコンテンツのスタイルにどのような影響を与えますか?

display:block display:inline 内

次のシナリオを考えてみましょう。

を持つ HTML ドキュメント。 display:inline と

でスタイル設定された要素display:block でスタイル設定された要素。 CSS 2.1 仕様によると、この設定の結果は次のようになります。

「

の周りに匿名ブロック ボックスがあり、

、

の前の匿名テキストの周りに匿名ブロック ボックスが含まれています」 ; ; ブロック ボックス、および

の後の匿名テキストの周囲に別の匿名ブロック ボックス。

視覚的には、結果のボックスは次のように表されます。

+- anonymous block box around body ---+
| +- anonymous block box around text 1-+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- P block box -------------------+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- anonymous block box around text 2-+ |
| |                                 + |
| +---------------------------------+ |
+-------------------------------------+

ただし、この設定は

の設定とは異なります。 CSS 2.1 仕様によると:

「匿名のブロック ボックスを生成させる要素に設定されたプロパティは、その要素のボックスとコンテンツに引き続き適用されます。」

この違いはプロパティで確認できます。 「ボーダー風」とか。

の場合、

の前後の匿名テキストが枠線で囲まれます。

要素を残します。要素は変更されません。対照的に、

では、境界線は

を含む body 要素全体を囲みます。要素。

以上が`` 要素の表示プロパティは、匿名ブロック ボックスの動作とその中のコンテンツのスタイルにどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。