Question

滚动条属于<html>还是<body>？

我一直在为每个html文件写作，但不确切知道它是什么。

Answer 1

给出以下标记和样式：

<!DOCTYPE html>

<html>
<head>
<title></title>
<style type="text/css">
html {
 background: green;
 overflow:scroll;
}
body {
 background: red;
 overflow:scroll;
}
</style>
</head>
<body>

</body>
</html>

我们得到以下视觉效果：

因此，我们可以设置HTML元素的样式。事实上，有些人会将此与BODY标签结合使用，以获得复杂的背景。

Answer 2

<html>没有视觉效果。它只是定义文档是一个html文档，它包含head和body。

具有body的{{1}}。

如果你谈论DOM，滚动条属于view。
但是在CSS中，你通过window设置滚动条样式

如果您在Firefox上使用Firebug并使用元素检查器（您可以移动鼠标并指向HTML文档的元素，并将其指向空白区域，那里没有元素，它指向{ {1}}。

Answer 3

至于css定义，标准规定你不能在html标签上定义任何样式（因为html标签本身不代表视图，它是正文，正如Mauris所说）。但是很多浏览器都支持在html上设置样式。

实施例

这会将页面背景显示为红色，正文为<div>绿色框：

<html style="background-color:red;overflow:scroll;">
  <head>
    <title>Page</title>
  </head>
  <body style="margin:10px;background-color:green;overflow:scroll;">
    Page content
  </body>
</html>

如果删除html标记上的样式定义，则整个页面上的背景颜色和滚动条将被填充。保证金仅适用于身体内的内容。

<html>
  <head>
    <title>Page</title>
  </head>
  <body style="margin:10px;background-color:green;overflow:scroll;">
    Page content
  </body>
</html>

Answer 4

根据CSS 2.1，根元素（＆lt; html＆gt;）是一个与任何其他元素一样的渲染块元素。它不代表视口，因此根据标准，它不是为视口提供滚动条的元素 - 实际上滚动条不属于任何元素。

如果有任何东西代表视口，那么它就是'初始包含块'的概念，但是这是来自根元素的“升级”，不能是CSS或DOM的地址。

然而，有一些特殊情况使此事混乱。特别是，由于第14.2节中规定的特殊行为，Ionut的测试给出了这些结果：

根元素的背景成为画布的背景并覆盖整个画布

也就是说，根元素的背景溢出其实际尺寸以填充整个视口和文档。其次：

对于其根元素为HTML“HTML”元素或XHTML“html”元素的文档，其计算值为'background'为'background-color'而'none'为'background-image'，用户代理必须而是在为画布绘制背景时使用该元素的第一个HTML“BODY”元素或XHTML“body”元素子元素的背景属性的计算值，并且不得为该子元素绘制背景

即使，＆lt; body＆gt; element肯定不代表视口，它的背景可以以相同的方式溢出其尺寸。这仅作为向后兼容性度量而存在，因为作者已经习惯于在＆lt; body＆gt;上指定背景。元件。

因此，您无法使用背景颜色来分辨根元素的尺寸或主体元素的尺寸所在。更好的方法是设置document.documentElement.style.border ='dotted red 1px'。这表明根＆lt; html＆gt; element具有文档的尺寸，而不是视口。

在IE Quirks模式中除了，它绕过滚动条。在Quirks模式中，＆lt; body＆gt;代表视口;设置body.style.overflow.hidden将删除页面的滚动条。这绝对是错的;你不想要Quirks Mode。

进一步混淆了这个问题，有一些有趣的非标准特殊情况行为暗示根元素是视口。

在IE（标准模式）中，根元素的“溢出”属性设置为“滚动”，您可以将其设置为“隐藏”以删除视口滚动条。 'offsetHeight'也是视口的高度，而不是边框所示元素的实际高度。

在其他浏览器中，offsetHeight是预期值，但（可能是为了兼容性）您仍然可以将document.documentElement.style.overflow设置为'hidden'（从默认的'visible'）以删除视口滚动条。奇怪的是，在Opera中，当你完成此操作时，currentStyle.overflow属性仍将显示为“可见”。

结果是，如果你想确保视口没有滚动条，你可以写：

html { overflow: hidden; height: 100%; }

并确保使用标准模式doctype。 'height：100％'规则处理浏览器遵循标准并且不将根元素的滚动条映射到视口的情况：这通过“初始包含块”设置高度以匹配视口，因此父视口不需要显示滚动条。

Answer 5

这只是一个标签，我们可以说让其他标签工作或定义这些标签的用途。实际上滚动条属于＆lt; BODY＆gt;和＆lt; BODY＆gt;属于＆lt; HTML＆gt;。

究竟是什么视觉？

5 个答案:

Firefox 3.5

Internet Explorer 6

Opera 10

Google Chrome 3

实施例