更改 body 元素的背景颜色和宽度答案

【问题标题】：Changing the background color and width of the body element更改 body 元素的背景颜色和宽度
【发布时间】：2016-02-16 01:12:37
【问题描述】：

我正在尝试为body 元素设置背景。我更改了body 的宽度，我希望背景适合这个宽度，但它却填满了整个屏幕。我该如何解决？

body {
border: 1px solid black;
width: 500px;
margin: 0 auto;
background: black;
}

【问题讨论】：

另见Applying a background to <html> and/or <body>和<html> width is less than its background

标签： html css background

【解决方案1】：

您实际上是在这样做，除非您没有为 html 元素声明背景颜色，否则它将采用 body 元素的背景颜色。因此，您没有看到差异。

只需给html元素一个不同的背景颜色，同时给body一些height：

html {
    background-color: red;     /* new */
}

body {
    border: 1px solid black;
    width: 500px;
    height: 500px;              /* new */
    margin: 0 auto;
    background: black;
}

了解html、body和background-color之间的关系。

所有元素的初始background-color 是transparent。

如果html 元素的background-color 未指定（即transparent），则根据CSS 规则，浏览器会将body 元素的background-color 赋予它。

来自规范：

3.11.2. The Canvas Background and the HTML <body> Element

对于根元素是 HTML HTML 元素或 XHTML 的文档 html 元素：如果 background-image 的计算值在根元素是none，它的background-color是transparent，用户代理必须改为传播该元素的第一个 HTML BODY 或 XHTML 的背景属性 body 子元素。 BODY 元素的使用值背景属性是它们的初始值，而传播的值被视为在根元素上指定。它建议 HTML 文档的作者指定画布 BODY 元素而不是 HTML 元素的背景。

【讨论】：

啊。我懂了。因此，当没有为自己声明任何内容时，HTML 会模仿主体的背景。我从来不知道。 ;P
当您在这里时，您是否知道是否有一种方法可以一次性将 css 应用于除主体之外的所有元素？
我更新了我的答案，提供了有关 html 和 background-color 的更多详细信息。
要定位除body 之外的所有元素，您可以尝试如下操作：body *。这针对 body 元素的所有后代。
谢谢。如果你还在这里，我就一个新话题提出了一个新问题。如果您有兴趣回答：stackoverflow.com/questions/35388228/…