我试图理解一些事情。
第一个问题:
为什么 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 突出显示):
html - 为什么某些html和body属性具有此行为?-LMLPHP
第二个问题:
在下一个示例中,为什么在 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;
}

最佳答案

你的第一个问题



答案是
这是因为 h1 标签, h1 从顶部和底部获取边距。你的观点是 html(红色)显示的。
它的默认行为。当您将 float 添加到 h1 时它会正常工作

h1{float: left;}

你的第二个问题



答案是

溢出仅在您将固定宽度/高度应用于任何标签/类时才有效。

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

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

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

关于html - 为什么某些html和body属性具有此行为?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36766058/

10-09 15:22
查看更多