Question

我想获取内联元素的内联框和CSS中内容区域的特定位置，如下图所示。我怎样才能做到这一点？此图来自 CSS：权威指南，第4版。

我尝试使用chrome开发工具。但这不符合我的要求。

更新：根据@Temani的建议，我可以通过添加背景色来获得位置。因此，我只需要确保<p>和<strong>元素的内嵌框的位置即可。

p {
  background: red;
}
strong {
  background: green;
}

<p style="font-size:12px; line-height:12px;">
which is <strong style="font-size:24px;">strongly emphasized</strong> and which is 
</p>

Answer 1

如果问题的位置偏移，则可以使用javascript获取。

test.html

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
</head>
<body>
  <div>header</div>
  <span id="inline-box">which is <span id="content-area" style="font-size: 30px">strongly emphasized</span> and which
    is</span>
  <div>footer</div>
</body>
</html>

javascript

$('#inline-box').offset().top
$('#inline-box').offset().left
$('#content-area').offset().top
$('#content-area').offset().left

Answer 2

您是对的。您可以在chrome dev工具中检查此位置。对于您的浏览器，此元素的“内容区域”具有line-height：16px；但是，如果您不使用normalize或reset样式，对于其他浏览器来说可能是其他样式。如果此元素对您很重要，则应亲自控制。例如给他上课。

如何使用某些工具（例如chrome dev工具）在CSS中获得内联元素的内联框和内容区域的特定位置？

2 个答案: