如何使用Chrome测量元素之间的像素距离?

时间:2018-08-27 21:06:50

标签: html css google-chrome-devtools

标题说明了一切。是否可以不进行任何扩展?

5 个答案:

答案 0 :(得分:2)

使用Chrome扩展程序,该扩展程序非常适合检查任何Web元素之间的像素距离。

https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=en-US

希望这会有所帮助

答案 1 :(得分:2)

我为此苦苦挣扎,并在devtools中找到了答案。首先,在响应模式下,标题的最右边是“更多选项”菜单,其中包含“显示标尺”选项。选择那个。然后,在“元素”下的详细信息设置中,有一个“显示标尺”选项需要检查。使用这两种方法,选择一个元素将显示从标尺延伸到该元素的线,以便您可以看到它们的位置。您可以看到各种元素的开始和结束以计算它们之间的间距。我需要处理到边缘的间距,所以要容易一些。 当不处于响应模式时,我不知道如何打开标尺,但是当我回到Web布局时,它们仍然存在。

答案 2 :(得分:1)

这种方法行得通吗?获取包含交替的黑白点(例如国际象棋棋盘)的图像,其中每个点均为1 px。使其成为背景图像。您可以放大约1000%并计算点数。

答案 3 :(得分:1)

您可以做的一件事是使用Console标签,使用诸如Element.getBoundingClientRect()HTMLElement.offsetTop之类的尺寸/位置属性/方法来计算两个元素之间的水平或垂直距离,但是我猜猜您正在寻找的东西更像是一种工具,而不是自己编写解决方案。

另一个可能更有用的选择是使用Elements > Styles面板来逐步添加某种视觉效果,从而使您可以评估所需的内容。例如,您可以向元素添加box-shadow / outline,然后逐像素增加其大小,直到它触摸到它旁边的元素,这样您才知道有多少像素分隔它们。

这是一个简单的代码示例/“ demo”,以便您确切地了解我的意思:

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

div {
  position: absolute;
  display: flex;
  border: 3px solid black;
  top: 10px;
  bottom: 10px;
  width: 100px;
  box-sizing: border-box;
}

.a {
  left: 10px;
}

.b {
  left: 120px;
  animation: measure 2s linear 0s infinite alternate; 
}

@keyframes measure {
    0%, 10% { box-shadow: 0 0 0 0px red; }
    10.001%, 20% { box-shadow: 0 0 0 2px red; }
    20.001%, 30% { box-shadow: 0 0 0 3px red; }
    30.001%, 40% { box-shadow: 0 0 0 4px red; }
    40.001%, 50% { box-shadow: 0 0 0 5px red; }
    50.001%, 60% { box-shadow: 0 0 0 6px red; }
    60.001%, 70% { box-shadow: 0 0 0 7px red; }
    70.001%, 80% { box-shadow: 0 0 0 8px red; }
    80.001%, 90% { box-shadow: 0 0 0 9px red; }
    90.001%, 100% { box-shadow: 0 0 0 10px cyan; }
}
<div class="a">A</div>
<div class="b">B</div>

除此之外,最好的选择是使用扩展程序。

我建议使用Dimensions,这是一个Chrome扩展程序,可以在您移动光标时不断自动测量垂直和水平空间,直到找到“障碍物”为止,这比绘制框要方便快捷。一种度量,就像其他大多数度量/标尺扩展一样。

答案 4 :(得分:-1)

否,不可能。尝试Page-Ruler