为什么背景色会填满整个屏幕？ [复制]答案

【问题标题】：Why is background-color filling up the entire screen? [duplicate]为什么背景色会填满整个屏幕？ [复制]
【发布时间】：2018-03-20 18:02:58
【问题描述】：

我有一个简单的标记，其中只有一个没有任何内容的主体，当我这样设置主体时：

body {
    width: 200px;
    height: 200px;
    background-color: antiquewhite;
    margin: auto;
}

整个屏幕不只是填充主体，而是用背景颜色填充，这对我来说没有任何意义，这是不是一些疯狂的 CSS 怪异？

【问题讨论】：

只需缩进四个空格以进行代码格式化或突出显示，然后单击{} 按钮。
body 与其他 HTML 元素的不同之处在于它是文档本身。如果您只希望屏幕的一部分具有不同的颜色，请考虑在其中使用 <div>。
“全屏”是什么意思？你是全屏模式吗？否则浏览器无法逃脱其应用窗口。
@tadman，哈哈，我会的，谢谢！
@tadman This is just one of the things you'll need to simply accept and move on. Sorry --> 这是我们应该理解的一件事，然后继续前进；)

标签： html css

【解决方案1】：

参考https://www.w3.org/TR/CSS2/colors.html#background

基本上，如果您的 HTML 的背景未指定，则它是“透明的”。如果存在，它将使用 BODY 的背景颜色。

我相信为 HTML 设置 bgcolor 会更容易：

html{background-color: white;}

body {
    width: 200px;
    height: 200px;
    background-color: black;
    margin: auto;
}

【讨论】：

唯一正确的答案，即使解释得不是很好但至少突出了正确的部分

【解决方案2】：

在你的 body 中创建一个 div 并为其设置样式。

#body{
  margin:auto;
  width:250px;
  height:250px;
  background-color:antiquewhite;
}

<html>
  <body>
    <div id="body">

    </div>
  </body>
</html>

【讨论】：

【解决方案3】：

<body> 元素包含 HTML 文档的所有内容，例如：文本、超链接、图像、表格、列表等。

如果你想改变 body 的颜色，你可以改变整个屏幕的颜色，但是如果你只想改变屏幕的一部分的背景颜色，你可以通过使用 div 元素、sections、等等

这是一个结构示例：

header
{
  height:50px;
  background-color:red;
}
section
{
  height:500px;
  background-color:blue;
}
footer
{
  height:50px;
  background-color:green;
}

<body>
	<header>
		
	</header>
	<section>

		
	</section>
	<footer>
		
	</footer>
</body>

【讨论】：

css-tricks.com/…

【解决方案4】：

通过在 css 文件中调用 <BODY> 标记，您将包含 Web 浏览器的整个界面。所以，很明显整个屏幕都会被选中的颜色填满。

我的建议是，如果你可以将正文分为页眉和页脚，或者使用带有类或 ID 的 div 来调整你想要着色的部分。

【讨论】：

css-tricks.com/…

【解决方案5】：

只需将此 sn-p 添加到 css 文件中的代码中

html{
   background-color:white;
}

【讨论】：