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

DDD
リリース: 2024-10-25 01:49:30
オリジナル
771 人が閲覧しました

How does the display property of the `` element affect the behavior of anonymous block boxes and the styling of content within them?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!