为什么 body 元素的背景样式会影响整个屏幕?

本文介绍了为什么 body 元素的背景样式会影响整个屏幕?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

当你为body元素的背景设置样式时，为什么样式会影响整个屏幕而不仅仅是body元素本身?假设我创建了以下规则:

When you style the background of the body element, why does the styling affect the entire screen and not just the body element itself? Let's say I create the following rule:

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

我发现边框显示为 700 像素宽，正如我所期望的那样，但背景颜色占据了整个浏览器视口.为什么?

I find that the border shows up as 700px wide as I would expect, but the background color occupies the entire browser viewport. Why?

推荐答案

引用自 www.w3/TR/CSS21/colors.html

根元素的背景成为画布的背景并覆盖整个画布，锚定在同一点(对于背景位置")，就像它只为根元素本身绘制时一样.根元素不再绘制此背景.

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

body 元素是根元素，因此，根据 CSS 规则的要求，它失去了背景样式，并且背景样式应用于包含的画布(浏览器中的网页区域))，因此整个屏幕都是蓝色的.其他属性与元素保持一致(例如 border).

The body element is the root-element, and thus, as required by the CSS rules it loses its background style and the background style is applied to the containing canvas (the webpage area in the browser), therefor the entire screen is blue. The other properties stay with the element (e.g. the border).