Chrome Dev Tools에서 계산 된 속성이 회색으로 표시되면 무엇을 의미합니까?

IT박스

itboxs 2020. 10. 25. 11:49

제발 참고, 하지 스타일 패널 (나는 회색으로 어떤 것을 적용 상황에하지의 방법을 알고있다), 그러나 이상 다음 패널, 계산 된 속성 패널.

계산 된 속성이 회색으로 표시되는 것은 무엇을 의미합니까?

예:

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 사양 기본값입니다.

0dp가 성능 향상으로 간주되는 이유는 무엇입니까? (0)	2020.10.25
프로그래밍 방식 SMS (0)	2020.10.25
VB.NET에 잠금 문이 있습니까? (0)	2020.10.24
SQL Server Windows 모드에서 혼합 모드로 변경하려면 어떻게합니까 (SQL Server 2008)? (0)	2020.10.24
Haml에서 어떻게 동적 ID를 만드나요? (0)	2020.10.24

itboxs