Как получить конкретную позицию встроенного блока и области содержимого в css с помощью некоторых инструментов, например, инструментов Chrome Dev? - PullRequest
Новая
       1

Как получить конкретную позицию встроенного блока и области содержимого в css с помощью некоторых инструментов, например, инструментов Chrome Dev?

0 голосов
/ 09 февраля 2019

Я хочу получить конкретную позицию встроенного блока и области содержимого встроенных элементов в css, как показано на следующем рисунке.Как я могу это сделать?enter image description here Это рисунок из CSS: Полное руководство , 4-е издание.

Я пытался использовать Chrome Dev Tools.Но это не отвечало моим требованиям.

Обновление: с предложениями @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>

Ответы [ 2 ]

0 голосов
/ 09 февраля 2019

Если позиция вопроса смещена, ее можно получить с помощью 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
0 голосов
/ 09 февраля 2019

Ты прав.Вы можете проверить эту позицию в Chrome Dev Tool.Для вашего броузера «content-area» для этого элемента имеет высоту строки: 16px;Но это может быть другим для других браузеров, если вы не будете использовать normalize или reset styles.Вы должны лично контролировать этот элемент, если он важен для вас.Дайте ему, например, класс.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...