为什么有些html和body属性会出现这种行为？

Question

我试图了解一些事情。

第一个问题：

为什么margin-top上有body？

＆＃13;

＆＃13;

html {
  height: 100%;
  background-color: red;
}
body {
  height: 100%;
  margin: 0;
  background-color: yellow;
}

＆＃13;

<h1>Hello Plunker!</h1>

＆＃13;

＆＃13;

＆＃13;

如果我在Chrome中查看开发工具检查器，则会显示h1上边距位于body上边距之外（图片显示h1突出显示）：

第二个问题：

在下一个示例中，为什么黄色会在body？

之外绘制

我希望只在body元素中看到黄色，因为我设置了overflow属性：

＆＃13;

＆＃13;

body {
  height: 100px;
  background-color: yellow;
  margin: 0;
  overflow: hidden;
}

＆＃13;

＆＃13;

＆＃13;

第三个问题

如果我在background-color元素上添加了html，它会起作用，黄色只填充body元素，为什么？

＆＃13;

＆＃13;

html {
  background-color: red;
}
body {
  height: 100px;
  background-color: yellow;
  margin: 0;
  overflow: hidden;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的第一个问题

  

为什么身体上有一个保证金顶部？

回答 这是因为h1标签，h1从顶部和底部获取边距。你的观点是html（红色）正在显示。 它是默认行为。将float添加到h1

时它会正常工作

h1{float: left;}  

您的第二个问题

  

我预计只会在身体元素中看到黄色   我设置溢出属性

回答

溢出仅在将修复宽度/高度应用于任何标记/类时起作用。

如果你将隐藏的溢出应用到html / body它不起作用，我认为它的浏览器的默认行为就像firefox以及其他人一样。因为同样的事情也发生在我身上。

第三个问题的答案也在第二个问题的答案中进行了总结

我希望它会有所帮助。感谢

Answer 2

设置保证金：0到h1并添加填充代替，将解决您的问题。