【发布时间】：2017-05-09 07:07:20
【问题描述】：
在没有指定溢出属性的简单页面中，如果内容溢出，会出现窗口滚动条。
浏览器默认将overflow: auto或scroll应用于HTML还是BODY元素？
例子：
div {
height: 200vh;
border: 10px solid;
}<div></div>【问题讨论】：
标签： css browser scrollbar overflow default
【发布时间】：2017-05-09 07:07:20
【问题描述】：
overflow 在未指定的每个元素上始终默认为visible。
overflow属性指定是否剪辑内容、渲染 滚动条或仅在溢出其块级别时显示内容 容器。
使用具有不同于可见值的溢出属性（其 默认）将创建一个新的块格式化上下文。这是 技术上必要 - 如果浮动与滚动相交 元素它将强制重新包装内容。重新包装会发生 在每个滚动步骤之后，导致缓慢的滚动体验。
visible 与 scroll 不同，后者强制滚动条，即使没有发生剪辑。 Visible 允许将内容呈现在视口之外，并允许在内容溢出初始视口时出现滚动条。
在您的示例中，body 是滚动条的原因。您的身体内容呈现在视口之外（其中的div）。因此，它会自动显示特定于 body 的滚动条——滚动条在 viewport 上呈现，而不是元素本身。
例子：
html, body {
width: 200px;
height: 200px;
}
div {
background-color: #F00;
width: 300px;
height: 300px;
}<div></div>【讨论】：
-
那么在这个例子中它适用于哪一个呢？该示例显示滚动条，所以我不确定它是 visible 在这种情况下的默认值。
其默认值为overflow:visible;
溢出属性控制超出其边界的内容会发生什么。您可以将其设置为：
- 可见：内容在其框外进行时不会被剪裁。 这是属性的默认值。
- hidden：溢出的内容将被隐藏。
- scroll：类似于隐藏，但用户可以滚动浏览 隐藏的内容。即使没有内容可以滚动，滚动条也会出现。
- auto：如果内容在其框外继续，则该内容将 隐藏，同时滚动条应可见以供用户阅读 其余内容。
- initial：使用可见的默认值
- 继承：将溢出设置为其父元素的值。
这里有一些很好的资源：
【讨论】：
-
如果默认值是visible，那为什么会出现滚动条呢？它们属于哪个元素？
-
它们被绑定到身体上。在
visible中看到没有元素的最大高度，如果高度大于视口，它会添加一个滚动条。