CSS 값
- 高洛峰원래의
- 2017-02-15 13:12:531253검색
CSS 값의 출처
우선 CSS는 간단한 구문을 가지고 있지만, 그 속성과 값은 공식적으로 정의되어 있다는 것을 알고 있습니다. 브라우저 제조업체.
이러한 값은 다음 상황에서 나옵니다.
상속은 조상 요소에서 값을 상속한다는 의미입니다. 모든 속성에는 해당 속성이 있습니다.
initial은 사용자 에이전트의 기본값을 나타냅니다. 모든 속성에는 해당 속성이 있습니다.
일반적으로 -ms-, -webkit- 등의 접두사가 붙는 브라우저별 값이며 일부 값에는 접두사가 없습니다.
브라우저가 공유하는 값입니다. 공유하더라도 각 브라우저의 구현이 반드시 동일하지는 않습니다.
따라서 CSS 호환성 문제는 대부분 브라우저 제조업체에서 구현하는 CSS 렌더링의 불일치와 발전으로 인해 발생하는 것이 확실합니다.
CSS 사양의 값
최종적으로 사용자에게 표시되는 값은 4단계를 거칩니다. 먼저 지정된 값("지정된 값"), 그 다음 상속된 값(" 계산된 값")을 사용된 값("사용된 값")으로 변환하고, 최종적으로 브라우저 자체의 한계로 인해 얻은 실제 값("실제 값")을 얻습니다.
은 指定值-->计算值-->使用值-->实际值
지정된 값
값을 지정하는 방법에는 세 가지가 있습니다. 하나는 사용자 에이전트의 기본값인 초기 값이고, 다른 하나는 프로그램에서 아티스트가 작성한 값입니다. , 다른 하나는 지정된 상속을 표시하는 값입니다.
일반적으로 상속이나 초기는 모두 명시적으로 지정할 필요가 없습니다. 그러나 어떤 경우에는 이 두 값이 매우 유용합니다.
계산값
문서가 형성되기 전 CSS 파일과 캐스케이딩 규칙 상속 관계를 파싱하여 렌더링 엔진에서 계산한 값입니다.
사용된 값
css와 html을 결합하여 문서를 만든 후 얻은 값입니다.
계산된 값과 사용된 값의 차이는 브라우저가 먼저 HTML과 CSS 파일을 별도로 구문 분석한 후 병합한다는 점을 이해하세요. 자세한 내용은 이 2개의 사진을 참조하세요.
웹킷 렌더링 프로세스
Geoko 렌더링 프로세스
실제 값
은 마지막 브라우저입니다. 예를 들어 모든 브라우저는 소수점 이하 7자리를 처리할 수 없으므로 정밀도가 떨어집니다.
이 4가지 값은 사양에서 파생됩니다. 다른 브라우저 구현에서는 이 4단계 프로세스에 따라 작동하지 않을 수 있지만 현재 주류 브라우저는 이 프로세스를 따릅니다.
참고 상속에서 캐스케이드가 다르다는 것입니다. 계단식 배열은 개별 CSS 속성에 대한 것이고 상속은 요소에 대한 것입니다. 계층화에는 종종 가중치 문제가 발생합니다.
Chrome 개발자
값 지정(3종)
사용자 에이전트 기본값(변경할 수 없음)
밑줄이 있는 값은 계단식 규칙에 의해 재정의됨, 즉 스타일이 가중치 규칙에 의해 재정의됨을 나타냅니다.
4를 클릭하면 해당 노드 및 스타일 보기로 이동합니다. 4 아래 부분은 스타일이 상속된 요소를 나타냅니다. 일반적으로 여기에서 해당 요소의 조상 DOM 체인을 볼 수 있습니다. 🎜>, 규칙을 사용할 수 없으며 런타임 시 평가됨을 나타냅니다.
예:이제 다음과 같이 h1의 높이를 지정합니다.
CSS 값의 출처
우선 CSS가 간단한 구문을 가지고 있지만 그 속성을 맹목적으로 작성하지는 않는다는 것을 알고 있습니다. 값은 공식적으로 정의되며, 정확하게 말하면 브라우저 제조업체에서 정의합니다.
이러한 값은 다음 상황에서 나옵니다.
상속은 조상 요소에서 값을 상속한다는 의미입니다. 모든 속성에는 해당 속성이 있습니다.
initial은 사용자 에이전트의 기본값을 나타냅니다. 모든 속성에는 해당 속성이 있습니다.
일반적으로 -ms-, -webkit- 등의 접두사가 붙는 브라우저별 값이며 일부 값에는 접두사가 없습니다.
브라우저가 공유하는 값입니다. 공유하더라도 각 브라우저의 구현이 반드시 동일하지는 않습니다.
따라서 CSS 호환성 문제는 대부분 브라우저 제조업체에서 구현하는 CSS 렌더링의 불일치와 발전으로 인해 발생하는 것이 확실합니다.
CSS 사양의 값
최종적으로 사용자에게 표시되는 값은 4단계를 거칩니다. 먼저 지정된 값("지정된 값"), 그 다음 상속된 값(" 계산된 값")을 사용된 값("사용된 값")으로 변환하고, 마지막으로 브라우저 자체의 한계로 인해 얻은 실제 값("실제 값")을 구합니다.
은 指定值-->计算值-->使用值-->实际值
지정된 값
값을 지정하는 방법에는 세 가지가 있습니다. 하나는 사용자 에이전트의 기본값인 초기 값이고, 다른 하나는 프로그램에서 아티스트가 작성한 값입니다. , 다른 하나는 지정된 상속을 표시하는 값입니다.
일반적으로 상속이나 초기는 모두 명시적으로 지정할 필요가 없습니다. 그러나 어떤 경우에는 이 두 값이 매우 유용합니다.
계산값
문서가 형성되기 전 CSS 파일과 캐스케이딩 규칙의 상속관계를 파싱하여 렌더링 엔진에서 계산한 값입니다.
사용된 값
css와 html을 결합하여 문서를 만든 후 얻은 값입니다.
계산된 값과 사용된 값의 차이는 브라우저가 먼저 HTML과 CSS 파일을 별도로 구문 분석한 후 병합한다는 점을 이해하세요. 자세한 내용은 이 2개의 사진을 참조하세요.
웹킷 렌더링 프로세스
Geoko 렌더링 프로세스
실제 값
은 마지막 브라우저입니다. 예를 들어 모든 브라우저는 소수점 이하 7자리를 처리할 수 없으므로 정밀도가 떨어집니다.
이 4가지 값은 사양에서 파생됩니다. 다른 브라우저 구현에서는 이 4단계 프로세스에 따라 작동하지 않을 수 있지만 현재 주류 브라우저는 이 프로세스를 따릅니다.
참고 상속에서 캐스케이드가 다르다는 것입니다. 계단식 배열은 개별 CSS 속성에 대한 것이고 상속은 요소에 대한 것입니다. 계층화에는 종종 가중치 문제가 발생합니다.
Chrome 개발자
값 지정(3종)
사용자 에이전트 기본값(변경할 수 없음)
밑줄이 있는 값은 계단식 규칙에 의해 재정의됨, 즉 스타일이 가중치 규칙에 의해 재정의됨을 나타냅니다.
4를 클릭하면 해당 노드 및 스타일 보기로 이동합니다. 4 아래 부분은 스타일이 상속된 요소를 나타냅니다. 일반적으로 여기에서 해당 요소의 조상 DOM 체인을 볼 수 있습니다. 🎜>, 규칙을 사용할 수 없으며 런타임 시 평가됨을 나타냅니다.
예:이제 다음과 같이 h1의 높이를 지정합니다.