Question

任何人都可以向我解释为什么我们可以设置元素html的样式？它与body之间有什么区别？

我经常使用body而不是html查看教程和多个网站，我在使用YUI 3: CSS Reset时才发现它，因为更改body中的背景不起作用。

编辑：实际上，我仍然没有找到相关的问题，当我添加reset.css时背景变白，当我删除它时恢复正常。然而Chrome检查员说背景是正常的。顺便说一句，这是主题。：P
编辑2 ：罪魁祸首是doctype。不知怎的，它在我的样式表中的html样式之后的css-reset渲染中创建了body样式。也许我应该就此提出一个问题。

~~Doctype：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">~~

Answer 1

通常你会发现人们对HTML元素进行样式化，因为它确实会对页面的呈现方式产生影响。

您可能会看到的最值得注意的风格是

html,body{
   min-height:101%;
}

这用于确保Firefox等浏览器中的滚动条始终显示在页面上。当在长页和短页之间切换时，这会停止页面左右移动。

Answer 2

我们被允许为html元素设置样式的原因是因为它是一个与其他任何元素一样的DOM元素。所有DOM元素都可以设置为不是容器的样式。举个例子：

<html><body>This is my page.</body></html>

使用CSS将主体限制为80％宽度，在主体上设置边框并为html提供不同的背景颜色（创建“离页”效果）将是完全可以接受的，保持标记的语义完整无需求助为了克服杂乱。

这是我发现的一种技术，用于在屏幕上对容器（垂直和水平）进行定心，而不使用大量的div或表格，甚至不必知道中心容器的大小。

html {
  display:table;
  width:100%;
  height:100%;
}
body {
  display:table-cell;
  vertical-align:middle;
}
body > div {
  # "shrink wraps" the div so you don't have to specify a width.
  # there's probably a better way to do precisely that, but this works.
  display:table; 
  margin:0 auto; # center the div
}

Answer 3

您可以设置html元素的样式（如果您愿意，可以head, title { display: block; }），但浏览器支持有点弱（IIRC，Internet Explorer＆lt; 8有问题）。

Answer 4

我会说：<html>本身不是可见元素，它包含语义部分（例如<head>）和表示数据（<body>）。

另一方面，<body>是可见元素的块，因此可以为其提供演示样式。

但是人们确实将样式应用于<html>元素以用于几个案例：（a）因为它的所有子元素都将继承该样式，并且（b）在特殊情况下，例如Jamie Dixon提到的滚动条技巧

Answer 5

我不相信你可以，但样式<body> 应该为你工作

Answer 6

html是整个文档的包含元素，它包含<body>，它是浏览器呈现的内容，<head>包含您正在查看的页面/文档的元信息。实际上没有必要能够设置html元素的样式，因为它不是由浏览器呈现的。

然而，它可用于构建css选择器（例如html div.dataView { color: red }）

在CSS中设置``元素的样式？

6 个答案: