代码之家 › 专栏 › 技术社区 › rb612

Chrome开发工具不突出显示整个主体?

google-chrome-devtools position css

rb612 · 技术社区 · 7 年前

我想知道这是一个bug还是(更可能)在使用dev工具/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;

我在JSFIDLE和本地副本上查看开发工具中突出显示的区域,发现了一些奇怪的地方。Chrome只是用蓝色突出显示了车身的一部分(位于小孩

1 回复 | 直到 7 年前

pl61 7 年前

Margin collapsing 原因 div.notrelative 将其利润扩大到 <body> 垂直推 <html> 大于 < . 因此,当您突出显示 <车身> ,是指 < 但在 <html> 未突出显示。未高亮显示的区域表示 . 添加边框可防止在父级和第一/最后一个子级情况下边距塌陷。

至于为什么那个区域在外面 <车身> 根据答案,受其背景颜色的影响 here 是因为 <html> 采用的背景色 <车身> .