ボディ要素の背景のスタイルがビューポート全体に影響するのはなぜですか?

Body 要素の背景のスタイル設定がビューポート全体に与える影響

Body 要素の背景をスタイル設定するとき、開発者はスタイルが範囲を超えて拡張される予期しない効果に遭遇する可能性があります。 body 要素であり、ビューポート全体をカバーします。この動作は、CSS のルート要素としての body 要素の役割に由来します。

W3C の CSS 標準で概説されている仕様に従って、背景のスタイルはルート要素 (この場合は body 要素) に適用されます。 Web ページのキャンバス全体に影響します。このキャンバスは、ブラウザのビューポートで使用可能な表示領域を取り囲み、body 要素の境界を越えて拡張されます。

提供された例では、

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

幅と高さのプロパティは、特に次のように適用されます。予想どおり、body 要素。ただし、body 要素がルート要素であり、その背景のスタイルが CSS 仕様の規定に従ってキャンバス全体に影響するため、背景色は画面全体に広がります。

基本的に、body 要素の背景はbody 要素自体のスタイルのみを設定するのではなく、ブラウザー内の Web ページ領域全体の背景を設定します。これは、CSS のルート要素の背景のスタイル設定に関連する独特の動作を示しています。

以上がボディ要素の背景のスタイルがビューポート全体に影響するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。