gpt4 book ai didi

css - css中如何通过一些工具获取内联元素的行内框和内容区域的具体位置,比如chrome dev tools?

转载 作者:行者123 更新时间:2023-11-28 15:08:04 25 4
gpt4 key购买 nike

我想在css中获取内联元素的行内框和内容区域的具体位置,如下图所示。我怎样才能做到这一点? enter image description here此图来自 CSS:权威指南,第 4 版。

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

更新:根据@Temani 的建议,我可以通过添加背景颜色来获得位置。所以我只需要确定 <p>inline box 的位置和 <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>

最佳答案

如果问题的位置有偏移,可以用javascript获取。

测试.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

关于css - css中如何通过一些工具获取内联元素的行内框和内容区域的具体位置,比如chrome dev tools?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54606682/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com