Обратите внимание, не на панель «Стили» (я знаю, что в данном контексте выделено серым цветом - не применяется), а на следующую панель, панель «Вычисленные свойства».
Что означает, когда вычисляемое свойство отображается серым цветом?
Пример:
css
google-chrome
google-chrome-devtools
АмвросийЧасовня
источник
источник
Ответы:
NB: У этого ответа нет убедительных доказательств, он основан на моих наблюдениях за то время.
Вычисленные свойства серого не являются ни по умолчанию, ни унаследованными. Это происходит только со свойствами, которые не были определены для элемента, но рассчитаны либо по его дочерним элементам, либо по родительскому элементу на основе рендеринга макета среды выполнения.
Возьмите эту простую страницу в качестве примера,
displayона используется по умолчанию иfont-sizeунаследована:<style> div { font-size: 13px; } </style> <div> <p>asdf</p> </div>В этом конкретном примере
heightвычисляется из<p>дочернего текстового узла (размер шрифта плюс высота строки),widthвычисляется из<div>ширины его родительского элемента, которая также вычисляется из его родительского узла<body>.РЕДАКТИРОВАТЬ: Ну, я снова подумал, вот мой ответ, основанный на мнении . Мне действительно стоит пойти и взглянуть на исходный код Chromium позже: D
Развернув эти стрелки, вы могли увидеть, какое действительное правило применяется к элементу среди всех правил, определенных против него (напрямую или унаследованных разработчиком или браузером):
Здесь вы можете проследить до каждого определения, включая встроенные правила браузера, и проверить с помощью механизма каскадирования (переопределения) CSS.
Итак, для тех элементов, которые не имеют определения CSS (не определены напрямую, не наследуются, не встроены в браузер), у вас нет источника для отслеживания. И значения свойств полностью рассчитываются во время выполнения.
Если вы отметите Показать все , будут показаны другие свойства, выделенные серым цветом. Они тоже нигде не определены. Но в отличие от предыдущих снимков экрана, они не рассчитываются во время выполнения - это значение по умолчанию в спецификации CSS.
источник
run-time calculatedпоскольку серые свойства обычно - это «высота» и «ширина», которые, если подумать, являются значениями, которые динамически зависят от дочерних элементов (например, количество текста и размер шрифта текст, содержащийся в элементе, или ширина родительского элемента, если у элемента ширина: 100%)widthстиль.