为什么 body 元素的背景样式会影响整个屏幕? [英] Why does styling the background of the body element affect the entire screen?

问题描述

当你为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?

推荐答案

引用自 http://www.w3.org/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).

这篇关于为什么 body 元素的背景样式会影响整个屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！