MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

used value

모든 CSS 속성(property)의 사용값(used value)은 모든 계산이 수행된 뒤 그 속성의 최종값입니다. 일부 속성의 경우, 사용값은 window.getComputedStyle을 호출하여 검색될 수 있습니다. 크기(가령, width, line-height)는 모두 픽셀이고, 단축(shorthand) 속성(예, background)은 그 컴포넌트 속성(가령, background-color, display)과 일치하고 positionfloat과 일치하며 모든 CSS 속성은 값이 있습니다.

상세

모든 CSS 속성의 최종값을 계산하는 세 단계가 있습니다. 먼저, 지정값은 종속(cascading, 속성을 바꾸는 가장 구체적인(specific) 스타일시트 규칙을 선택하는), 상속(그 속성이 상속 가능한 경우 부모와 같은 계산값을 사용하는) 또는 기본값(default)을 사용한 결과입니다. 그 뒤에, 계산값은 스펙에 따라 계산됩니다(예를 들어, position: absolutespandisplay의 계산값이 block으로 바뀌게 됩니다). 끝으로, 레이아웃이 계산되고 (부모에 대해 auto 또는 퍼센트인 크기(dimension)는 픽셀값으로 대체됩니다) 그 결과가 사용값입니다. 이 단계는 내부적으로 계산됩니다. 그래서 스크립트는 최종 사용값을 window.getComputedStyle로만 읽을 수 있습니다 (비록 이 메서드가 속성에 따라 계산값을 대신 반환할 수 있지만; 이 반환 값은 일반적으로 결정값이라고 합니다).

<div style="border: 1px solid red">명시된 width 없음. 지정된 width: auto (default). 계산된 width: auto. 사용된 width: 998px (예를 들어).
<div style="border: 1px solid green; width: 50%">명시된 width: 50%. 지정된 width: 50%. 계산된 width: 50%. 사용된 width: 447px (예를 들어).
<div style="border: 1px solid blue; width: inherit">명시된 width: inherit. 지정된 width: 50%. 계산된 width: 50%. 사용된 width: 221px (예를 들어).</div>
</div>
</div>   

 

계산값과의 차이

CSS 2.0은 속성의 계산에서 마지막 단계로 계산값만 정의했습니다. 그 뒤에, CSS 2.1은 요소가 계산값이 퍼센트인 부모의 너비/높이를 명시해서 상속할 수 있도록 사용값의 분명한 정의를 도입했습니다. 레이아웃에 의존하지 않는 CSS 속성(가령, display, font-size, line-height)의 경우, 계산값 및 사용값은 같습니다. 다음은 레이아웃에 의존하는 CSS 2.1 속성으로, 그래서 그들은 서로 다른 계산값 및 사용값이 있습니다: (CSS 2.1 Changes: Specified, computed, and actual values에서 가져옴):

  • background-position
  • bottom, left, right, top
  • height, width
  • margin-bottom, margin-left, margin-right, margin-top,
  • min-height, min-width
  • padding-bottom, padding-left, padding-right, padding-top
  • text-indent

스펙

CSS Level 2: Used Values

참조

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: Netaras
 최종 변경: Netaras,