我试图理解一些事情。
第一个问题:
为什么 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;
}
最佳答案
你的第一个问题
答案是
这是因为 h1 标签, h1 从顶部和底部获取边距。你的观点是 html(红色)显示的。
它的默认行为。当您将 float 添加到 h1 时它会正常工作
h1{float: left;}
你的第二个问题
答案是
溢出仅在您将固定宽度/高度应用于任何标签/类时才有效。
如果您将溢出隐藏应用到 html/body 它不起作用,我认为它是浏览器的默认行为,如 firefox 以及其他可能的行为。因为同样的事情也发生在我身上。
第三个问题的答案也总结在第二个问题的答案中
我希望它会有所帮助。谢谢
关于html - 为什么某些html和body属性具有此行为?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36766058/