Question

我想知道这是使用开发工具/ CSS时的错误还是（更可能是）误解。我当时正在玩具有以下样式的JSFiddle：

div.notrelative {
    height: 100px;
    width: 100px;
    background: #eaf;
    margin: 50px;
    font-size: 9px;
    position:relative;
    font-family: Arial;
}
body {
    margin:30px;
}
div.absolute {
    height: 20px;
    width: 20px;
    position: absolute;
    background: #eea;
    margin-bottom: 10px;
    top: 0;
    left: 0;

，我正在JSFiddle和本地副本上的开发工具中查看突出显示的区域，我发现了一些奇怪的地方。尽管主体占据了整个页面（如灰色背景所示），但Chrome仅以蓝色突出显示了主体的一部分（在 child 元素的上边距之后，但是没有在左边距内）。颜色）。但是，仅在身体周围创建简单的边框之类的东西似乎就可以解决突出显示问题。 Chrome在这两种情况下突出显示不同的原因是吗？

Answer 1

Margin collapsing使div.notrelative的边距垂直延伸到<body>之外，并推动<html>大于<body>。因此，当突出显示<body>时，<body>之外但<html>内的区域不会突出显示。该未突出显示的区域表示div.notrelative的边距。添加边框可防止在父级和第一个/最后一个孩子的情况下页边距崩溃。

关于<body>之外的区域为何受其背景颜色影响的原因，基于答案here，这是因为<html>采用了{{1}的背景颜色}。

Chrome开发者工具无法突出整个机身？

1 个答案: