身体的背景溢出[重复]答案

【问题标题】：Body's background is overflowing [duplicate]身体的背景溢出[重复]
【发布时间】：2021-05-23 16:32:59
【问题描述】：

所以我将身体的高度和宽度分别设置为 100 像素，并为其设置了红色的背景颜色和 10 像素的纯黑色边框。为什么不是带有黑色边框的 100x100 红色框，而是在整个屏幕上看到红色，边框具有预期的尺寸。

html, body{
    height:100px;
    width:100px;
}

body{
    background-color: red;
    font-size: 60px;
    border:10px solid black;
}

<body>
</body>

【问题讨论】：

标签： javascript html css

【解决方案1】：

这很奇怪。这不是我所期望的，但this 似乎表明这是一种已知行为，如果<html> 上的背景颜色未设置，但<body> 上的背景颜色是，<body> 背景将淹没整个<html> 区域。

引用the spec：

对于根元素是 HTML HTML 元素或 XHTML 的文档 html 元素 [HTML]：如果背景图像的计算值在根元素为无且其背景颜色为透明，用户代理必须改为传播背景的计算值来自该元素的第一个 HTML BODY 或 XHTML 正文子元素的属性元素。该 BODY 元素的背景属性的使用值是它们的初始值，传播的值被视为它们是在根元素上指定的。

您还可以在该规范链接中查看与您的类似的示例。

更新：

RE：关于<html> 元素传播到视口背景的其他问题，我认为in a nearby section of the spec 也已回答，尽管我不太清楚：

根元素的背景成为画布背景，它的背景绘画区域延伸到整个画布。

注意canvas 在这种情况下指的是页面呈现的无限表面，而不是 HTML5 画布。在我看来，这似乎描述了您在评论中提到的行为，其中具有小宽度/高度的 <html> 的背景传播到视口，尽管为什么他们需要我上面引用的附加部分，但我不确定.如果您好奇，该链接上有更多信息。 AFAICT 部分之间似乎有一些重叠。

【讨论】：

是的，确实身体的背景正在传播到 html，但现在同样的问题是 html。我设置了 100x100 像素的高度和宽度尺寸，黑色边框为 10 像素。而不是看到一个 100x100px 的蓝色框，而是在整个屏幕上溢出背景，边框具有预期的尺寸。 body, html{ height:100px; width:100px; } html{ background-color: aqua; border:10px solid black; }``body{ background-color: red; font-size: 60px; border:10px solid black; }
你想完成什么？为什么要让 html 和 body 元素都比浏览器视口小？
好吧，我只是想查看身体的边界，但遇到了这种行为
我当然不是规范专家，但我可以说，规范的该领域也涵盖了行为。更新了我的答案。
谢谢希望它是一个可靠的来源

【解决方案2】：

如果您的目标是创建一个带黑色边框的 100x100 红色框，您可以在 html 中创建一个 div，然后在您的 CSS 中为该 div 赋予您想要的属性。

例如，

.red-box {
    height:100px;
    width:100px;
    background-color: red;
    border:10px solid black;
}

<html>
<body>
<div class = "red-box"></div>
</body>
</html>

【讨论】：