gpt4 book ai didi

html - 如果设置在 body 标签上,背景颜色是否默认占据整个视口(viewport)?

转载 作者:行者123 更新时间:2023-12-04 13:29:51 25 4
gpt4 key购买 nike

这个问题在这里已经有了答案:





Why does styling the background of the body element affect the entire screen?

(7 个回答)


10 个月前关闭。




我有以下 HTML:

<body class="page">
</body>
并绑定(bind)到该选择器,以下规则:
.page {
background-color: #2A2C2F;
}
enter image description here
从上图可以看出, body element 占据其包含元素的宽度(自然,因为它是一个 block 级别元素)并且没有高度。然而,即使是这种情况,我看到整个视口(viewport)都呈现在 background-color 上。我已经设置了。根据 this freeCodeCamp文章, background-color只影响元素的内容区域和内边距(尽管我想知道我们是否可以使用 box-sizing 规则来改变它)。
为什么即使没有高度,视口(viewport)似乎也呈现 background-color ?

最佳答案

简短回答 - 是的,如果 <html>标签没有背景颜色。
来自 CSS-tricks:

In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.


您还可以从 the spec on CSS backgrounds 阅读更多相关信息。 .

考虑以下两个片段:
  • <html> 上没有背景颜色, 正文背景颜色拉伸(stretch)以填充 canvas .

  • body {
    background-color: #2a2c2f;
    color: white;
    }
    content here

  • <html> 上的背景颜色, 正文背景颜色仅限于正文标签内的内容。

  • html {
    background-color: white;
    }

    body {
    padding: 10px;
    background-color: #2a2c2f;
    color: white;
    }
    content here

    关于html - 如果设置在 body 标签上,背景颜色是否默认占据整个视口(viewport)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65741050/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com