应该在 html 元素或 body 元素上设置全局 css 样式吗？答案

【问题标题】：Should global css styles be set on the html element or the body element?应该在 html 元素或 body 元素上设置全局 css 样式吗？
【发布时间】：2011-06-01 17:51:52
【问题描述】：

有时我看到人们将全局 css 样式应用于html，有时我看到他们将它们应用于body，同时使用原始 css 和 javascript。

这两者有什么不同吗？制作全局 CSS 样式的标准是什么？在它们之间进行选择时我应该知道什么？

【问题讨论】：

标签： html css

【解决方案1】：

我假设这里的“全局页面样式”是指诸如字体、颜色和背景之类的东西。

就个人而言，我将全局页面样式应用于body 和简单的元素选择器（p、h1, h2, h3...、input、img 等）。这些元素与向用户呈现 HTML 页面的内容更密切相关。

我这样做的理由很简单：bgcolor、background、text、topmargin、leftmargin 和其他属性被赋予body 元素，而不是html 元素。这些属性现在转换为their respective CSS rules with extremely low precedence in the cascade：

UA 可以选择尊重 HTML 源文档中的表示属性。如果是这样，这些属性将被转换为特异性等于 0 的相应 CSS 规则，并被视为插入到作者样式表的开头。

我知道的大多数（如果不是全部）实现会将这些转换为body 上的 CSS 规则，基于它们的 HTML 等效项。其他如link、alink 和vlink 将分别成为a:link、a:active 和a:visited 规则。

当然，应该注意的是，CSS 本身并没有任何语义本身，因为它本身就是一种样式语言，完全独立于 HTML 的内容结构文档。尽管introduction to CSS2.1 涵盖了HTML 文档样式的基础知识，但请注意，该部分称自己为非规范性（或信息性）；这意味着它没有为 CSS 实现者设置任何硬性和快速的规则。相反，它只是为读者提供信息。

也就是说，某些样式可以应用于html 以修改视口行为。例如，要隐藏页面滚动条，请使用：

html {
    overflow: hidden;
}

您还可以将规则应用于html 和body 以获得有趣的效果；有关详细信息和示例，请参阅以下问题：

注意html 不是视口；视口建立了一个初始包含块，html 位于其中。该初始包含块不能使用 CSS 定位，因为在 HTML 中，根元素是 html。

另请注意，从技术上讲，将默认继承的属性应用于html 和body 之间没有区别，例如font-family 和color。

最后但同样重要的是，这里有一个出色的article，详细说明了html 和body 在CSS 方面的区别。总结（引自第一部分）：

html 和 body 元素是不同的块级实体，在父子关系。

html 元素的高度和宽度由浏览器窗口控制。

html 元素（默认情况下）具有overflow:auto，导致滚动条在需要时出现。

body 元素（默认）是position:static，这意味着它的定位子是相对于html 定位元素的坐标系。

在几乎所有现代浏览器中，内置的从边缘偏移页面通过margin 应用 body 元素，而不是 padding html 元素。

作为根元素，html 与浏览器视口的关联比body 更紧密（这就是为什么它说html 有overflow: auto 用于滚动条）。但请注意，滚动条不一定由 html 元素本身生成。默认情况下，生成这些滚动条的是 viewport； overflow 的值只是在body、html 和视口之间传输（或传播），具体取决于您设置的值。所有这一切的细节都在 CSS2.1 规范中进行了介绍，says:

UA 必须将在根元素上设置的“溢出”属性应用于视口。当根元素是 HTML "HTML" 元素或 XHTML "html" 元素，并且该元素具有 HTML "BODY" 元素或 XHTML "body" 元素作为子元素时，用户代理必须改为应用 'overflow' 属性如果根元素上的值为“可见”，则从第一个此类子元素到视口。用于视口时的“可见”值必须解释为“自动”。从中传播值的元素必须具有用于 'visible' 的 'overflow' 的使用值。

最后一个要点可能源于上述body 元素的topmargin 和leftmargin 属性。

【讨论】：

打败我。另外：应该注意的是，body 的功能就像 div 一样，会扩展到里面的内容，而 html 跨越整个视口。

【解决方案2】：

如果您只想设置将要显示的内容的样式，定位 <body> 元素可以将样式规则保存为不必要的级联级别。

您是否有理由将样式应用于<title>、<meta>、<script> 等标签？这将通过定位<html> 来实现。

【讨论】：