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

问题描述

在你的风格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; border: 1px 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.

体元素是根元素，并且因此，所要求的CSS规则它失去它的背景风格和背景样式被应用到含画布（在浏览器中的网页区域），为此整个屏幕是蓝色的。其他属性留元素（例如边框）。

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屋！