Question

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

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

示例：

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

<div></div>

Answer 1

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

overflow属性指定是否剪辑内容，渲染   滚动条或仅在溢出其块级别时显示内容   容器

使用overflow属性与可见值不同的值（其值   默认）将创建一个新的块格式化上下文。这是   技术上必要 - 如果浮动与滚动相交   它会强行重新包装内容。重新包裹会发生   在每个滚动步骤之后，导致慢滚动体验。

然而，

visible与强制滚动条的visible不同，即使没有剪辑也是如此。 Visible允许在视口外部呈现内容，并允许滚动条在内容溢出初始视口时出现。

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

示例：

viewport

html, body {
  width: 200px;
  height: 200px;
}

div {
  background-color: #F00;
  width: 300px;
  height: 300px;
}

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

Answer 2

其默认值为overflow:visible;

overflow属性控制内容超出其边界的内容。这是你可以设置的：

可见：内容在其框外进行时不会被剪裁。这是属性的默认值。
隐藏：溢出的内容将被隐藏。
scroll：类似于隐藏，但用户可以滚动浏览隐藏的内容。即使没有内容可以滚动，也会出现滚动条。
auto：如果内容在其框外进行，那么该内容将会隐藏，同时应该可以看到滚动条供用户阅读其余的内容。
initial：使用可见的默认值
inherit：将溢出设置为其父元素的值。

以下是一些很好的资源：

http://www.w3schools.com/jsref/prop_style_overflow.asp

https://developer.mozilla.org/en/docs/Web/CSS/overflow

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

2 个答案: