Как отладить, почему элемент HTML имеет определенные свойства - PullRequest
0 голосов
/ 12 апреля 2020

Это вопрос новичка о том, как отладить макет HTML.

Я создал веб-страницу. Я смотрю на это в браузере. Элемент больше, чем я ожидал - если быть точным, он имеет большую ширину. Есть ли способ спросить браузер, который решил отрендерить его по ширине, которую я вижу, почему имеет именно эту ширину?

То есть есть ли способ для меня попросить браузер (например, Chrome) показать мне точно и только набор CSS свойств, других элементов и других ограничений, которые способствовали вычислению значения, которое я наблюдаю?

1 Ответ

1 голос
/ 12 апреля 2020

Вы можете проверить (Ctrl + Shift + I), чтобы увидеть все свойства, относящиеся к вашему html документу. Проверьте с помощью упомянутой команды и в параметрах, приведенных сверху, нажмите Элементы . Там вы найдете все элементы, присутствующие в вашем HTML документе. Выберите элемент, который вы хотите исследовать. После выбора элемента на правой стороне вы увидите различные css, примененные к выбранному элементу. Вы увидите класс и атрибуты в нем. Помимо класса будет также упомянуто имя файла , к которому принадлежит класс. Когда вы прокрутите вниз, вы найдете коробочную модель выбранного элемента. Он будет показывать поле снаружи, заполнять его, граничить вокруг него и где он расположен. Кроме того, есть другой эффект, который вы можете проверить, нажав на : hov вверху. Там вы найдете «Состояние элемента силы» . Когда вы проверяете : hover из этих опций, вы видите, как выбранный элемент будет выглядеть при наведении курсора. То же самое для других опций. Вы можете использовать filter вверху рядом с: hov, чтобы отфильтровать класс, содержащий определенный атрибут, введя атрибут в фильтре. Под фильтром вы найдете element.style , где вы можете применить различные свойства css к выбранному элементу, введя атрибуты и их значение в element.style.

Надеюсь, это поможет вам.

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