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

Question

我想了解一些事情.

第一个问题:

为什么有一个margin-top上body？

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

<h1>Hello Plunker!</h1>

如果我在Chrome中查看开发工具检查器,它会向我显示h1上边距位于上边距之外body(图片显示h1突出显示):

第二个问题:

在下一个例子中,为什么黄色被绘制在body？之外？

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

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

第三个问题

如果我background-color在html元素上添加一个,它可以工作,黄色只填充body元素,为什么？

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

Answer 1

你的第一个问题

为什么主体上有一个边缘顶部？

答案是 这是因为h1标签，h1从顶部和底部获取边距。你的观点是值得重视的，html（红色）正在显示。它是默认行为。当你将 float 添加到 h1 时它会正常工作

h1{float: left;}  

你的第二个问题

鉴于我设置了溢出属性，我预计只会在 body 元素中看到黄色

答案是

仅当您将固定宽度/高度应用于任何标签/类时，溢出才起作用。

如果您将溢出隐藏应用于 html/body 它不起作用，我认为它是 Firefox 等浏览器以及其他浏览器的默认行为。因为同样的事情也发生在我身上。

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

我希望这会有所帮助。谢谢