css - 默认情况下，页面中的溢出自动应用于 HTML 或 BODY 吗？

Question

在没有指定溢出属性的简单页面中，如果内容溢出，则出现窗口滚动条。

overflow: auto 或 scroll 是浏览器默认应用于 HTML 还是 BODY 元素？

例子:

div {
  height: 200vh;
  border: 10px solid;
}

<div></div>

Answer 1

overflow 在每个未指定的元素上始终默认为 visible。

The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.

Using the overflow property with a value different to visible (its default) will create a new block formatting context. This is technically necessary — if a float intersected with the scrolling element it would forcibly rewrap the content. The rewrap would happen after each scroll step, leading to a slow scrolling experience.

然而，

visible 与 scroll 不同，它强制滚动条，即使没有发生裁剪。 Visible 允许在视口(viewport)外呈现内容，并允许在内容溢出初始视口(viewport)时显示滚动条。

在您的示例中，body 是滚动条的原因。您 body 的内容呈现在视口(viewport)之外(其中的 div)。因此，它会自动显示特定于主体的滚动条 - 滚动条在 viewport 而不是元素本身上呈现。

例子:

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

div {
  background-color: #F00;
  width: 300px;
  height: 300px;
}

<div></div>

引自:https://developer.mozilla.org/nl/docs/Web/CSS/overflow