一尘不染

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

html

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

body {width: 700px; border: 1px dotted red; background-color: blue;}

我发现边框显示出了我所期望的700px宽,但是背景色占据了整个浏览器视口。为什么?


阅读 407

收藏
2020-05-10

共1个答案

一尘不染

引用

根元素的背景成为画布的背景,并覆盖整个画布,将其锚定(用于“背景位置”),与仅针对根元素本身进行绘制时的锚定点相同。根元素不会再次绘制此背景。

body元素是根元素,因此,按照CSS规则的要求,该元素将失去其背景样式,并且背景样式将应用于包含的画布(浏览器中的网页区域),因此整个屏幕均为蓝色。其他属性与元素一起保留(例如border)。

2020-05-10