ホームページ >ウェブフロントエンド >CSSチュートリアル >body 要素の背景色のスタイルを設定すると画面全体に影響するのはなぜですか?

body 要素の背景色のスタイルを設定すると画面全体に影響するのはなぜですか?

DDD
DDDオリジナル
2024-12-21 15:50:13953ブラウズ

Why Does Styling the Body Element's Background Color Affect the Entire Screen?

body 要素の背景のスタイル設定が画面全体に影響する理由

body 要素は HTML ドキュメントのルート要素であり、そのスタイルを設定します。背景プロパティには、要素自体を超えて拡張される独自の効果があります。本文に背景色を割り当てると、その色が Web ページ全体の背景となり、ブラウザーのビューポート全体をカバーします。

CSS 仕様 (http://www.w3.org/TR/CSS21) によると、 /colors.html), "ルート要素の背景がキャンバスの背景となり、キャンバス全体を覆います。"これは、body 要素自体がビューポート全体を占有しない場合でも、body 要素の背景色がページ全体に適用されることを意味します。

たとえば、次の CSS ルールを設定したとします。

body {
  width: 700px;
  height: 200px;
  border: 5px dotted red;
  background-color: blue;
}

背景色は要素の幅と高さによって定義される 700 ピクセル x 200 ピクセルの領域のみを埋めると予想されるかもしれません。ただし、青色の背景は画面全体を占めますが、境界線は 700 ピクセル x 200 ピクセルのサイズに制限されたままになります。

この動作は CSS スタイル設定の基本的な側面です。 body 要素は、ページ上の他のすべての要素の最も外側のコンテナであり、その background プロパティはキャンバス全体の背景を設定します。ボーダーなどの他のプロパティは要素自体に適用されますが、背景プロパティはビューポート全体に拡張され、背景が画面全体に浸透しているかのような錯覚を生み出します。

以上がbody 要素の背景色のスタイルを設定すると画面全体に影響するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。