CSS의 우선순위, Stacking Context 등 고급 기능을 자세히 설명하면 CSS에 대한 이해가 깊어집니다! !

보통 CSS를 배울 때 구문이 마스터하기 쉽다고 느끼지만 실제 응용 프로그램에서는 채우기가 어려운 다양한 "구덩이"에 직면하게 됩니다. 동일한 혼란과 혼란을 피하기 위해 이 기사에서는 설명합니다. 자세히 CSS의 우선 순위 및 Stacking Context와 같은 고급 기능을 갖추고 있습니다. CSS에 대한 더 깊은 이해를 제공합니다.

CSS 우선순위

우선순위는 브라우저가 요소와 가장 관련성이 높은 속성 값을 판단하여 요소에 결정하고 적용하는 것입니다. 우선순위는 선택자로 구성된 일치 규칙에 의해서만 결정됩니다. P 태그에 클래스(Class)를 추가하면 실행 후 클래스의 일부 속성이 변경되지 않으며 CSS 선택기에 우선순위 문제가 발생합니다.

선택기 우선순위

일반적인 선택기 유형:

• 인라인 스타일(예: ... ;
• ID 선택기) #id;
• 클래스 선택기(클래스), 예: .class {...}, [href=''], :hover
• 태그 선택기(Tag ), 예: p,:before

각 선택자의 종류는 다르며, 각 선택자의 우선순위는 가중치에 따라 결정됩니다.

• 인라인 스타일: 1,0,0,0
• ID 선택자: 1,0,0
• 클래스 선택자: 1, 0
• 태그 선택기: 1

그림에 표시된 대로 소스 우선순위 순서

스타일 시스템은 가장 오른쪽 선택기부터 왼쪽으로 일치하는 규칙을 시작합니다. 현재 선택기 왼쪽에 다른 선택기가 있는 한 스타일 시스템은 규칙과 일치하는 요소를 찾거나 불일치로 인해 종료될 때까지 계속 왼쪽으로 이동합니다.

CSS 우선순위 규칙:

1. 각 선택기에는 가중치가 있으며, 가중치가 클수록 우선순위가 높습니다.
2. 가중치가 같으면 나중에 나타나는 스타일 시트 설정이 먼저 나타나는 스타일 시트 설정보다 좋습니다. 설정
3. 제작자의 규칙은 뷰어의 규칙보다 높습니다. 즉, 웹 페이지 작성자가 설정한 CSS 스타일이 브라우저에서 설정한 스타일보다 우선순위가 높습니다.
4. 상속된 CSS 스타일은 그다지 좋지 않습니다.
5. 그룹 속성 설정에서 "!important"로 표시된 동일한 규칙이 가장 높은 우선순위를 갖습니다.

일반적으로 사용되는 CSS 모델

Box Model은 CSS 기술에서 자주 사용되는 사고 모델입니다. 웹 디자인에 사용됩니다.

Box 모델 관련 CSS 속성 요소 콘텐츠(요소 콘텐츠), 너비 및 높이(너비/높이), 패딩, 테두리 및 여백.

CSS에서 너비와 높이는 콘텐츠 영역(요소)의 너비와 높이를 나타냅니다. 패딩, 테두리 및 여백을 늘리면 콘텐츠 영역의 크기에는 영향을 미치지 않지만 요소 상자의 전체 크기는 늘어납니다. 상자의 여백은 10픽셀이고 각 측면의 패딩은 5픽셀이라고 가정합니다. 요소 상자를 100픽셀로 설정하려면 콘텐츠 너비를 70픽셀로 설정해야 합니다. 필수 속성은 다음과 같습니다.

기본 속성

• Width/Height
• Padding
• Margin
• Boder
• Outline
• Offset 속성
  • Top/Left/Bottom/Right
• 및 .NET WinForm의 차이점:
  • Width/Height에는 기본적으로 Padding이 포함되지 않습니다.
  • Margin/Padding 속성의 네 가지 값 순서는 오른쪽 위 왼쪽 아래(시계 방향)입니다.

모두 상자 모델로 간주할 수 있습니다

세로 여백 병합

의 세로 여백이 12px이면 두

사이의 세로 거리는 얼마입니까? 상식적으로는 12 + 12 = 24px가 되어야 하는데, 답은 여전히 ​​12px입니다. 수직 여백이 겹치기 때문에 더 큰 여백은 가려집니다.

Position 속성은 요소의 위치 지정 유형을 지정합니다. 이 속성은 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 정의합니다. 모든 요소를 ​​배치할 수 있지만 절대 또는 고정 요소는 요소 자체의 유형에 관계없이 블록 수준 상자를 생성합니다. 상대적으로 배치된 요소는 일반 흐름의 기본 위치에서 오프셋됩니다. 다음은 Position 속성의 값 범위입니다.

• 정적 일반 흐름 레이아웃(일반 흐름), 기본값입니다. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다.
• Relative는 오프셋 속성이 있는 일반 흐름 레이아웃을 지원하여 일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.
• Absolute 컨테이너 요소 내 절대 위치 지정 레이아웃은 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치 지정되는 절대 위치 지정 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
• Fixed 디스플레이 범위 내에서 절대적으로 배치된 레이아웃은 브라우저 창을 기준으로 배치된 절대적으로 배치된 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

Float 속성

float 속성은 요소가 부동하는 방향을 정의합니다. 역사적으로 이 속성은 항상 이미지에 적용되어 텍스트가 이미지 주위를 둘러싸도록 했지만 CSS에서는 모든 요소가 부동될 수 있습니다. 부동 요소는 요소 유형에 관계없이 블록 수준 상자를 만듭니다.

Stacking context

z-index 스택 공간 특성을 제공하고 하위 요소의 렌더링 순서에 영향을 미치는 구조를 stacking context라고 합니다.

브라우저는 다음 규칙을 충족하는 DOM 요소에 Stacking 컨텍스트를 할당합니다.

• 루트 요소(html)
• "위치: 절대 또는 상대) 및 지정된 Z-색인 값이 자동이 아니고
• flex 항목이 지정된 Z-색인 값이 자동이 아닙니다.
• opacity. 1의 요소보다 작습니다
• 없음 이외의 변환 값을 지정하는 요소
• 일반 이외의 혼합 혼합 모드 값을 지정하는 요소
• 없음 이외의 필터 값을 지정하는 요소
• 격리를 지정하는 요소 isolate 값
• will-change 속성에서 지정된 값이 위 목록의 속성인 요소
• -webkit-overflow-scrolling 값이 지정된 요소

z-index

스태킹 순서

• DOM 트리 구조에 따르면 스태킹 컨텍스트의 요소는 트리 구조를 형성합니다.
• 스태킹 컨텍스트의 요소는 Z-인덱스를 기준으로 순서대로 스택됩니다. z-index가 큰 것이 먼저 옵니다
• Z-index가 0인 요소, stacking context가 있는 요소의 쌓인 순서가 먼저 옵니다

• 위 조건을 구분할 수 없는 경우 DOM 트리의 순서를 사용하여 결정합니다. 쌓이는 순서.

성능

픽셀 렌더링 파이프라인

성능을 향상하려면 건설 파이프라인의 각 요소에 주의가 필요합니다.

• Style
  • 스타일 선택기의 복잡성을 줄입니다
  • 필요성을 줄입니다. 실행하다 스타일에 따라 계산된 요소 수
• Layout
  • 최대한 레이아웃 트리거를 피하세요
    • 거의 모든 레이아웃은 전체 문서의 범위 내에서 발생합니다.
    • Flexbox를 사용하여 이전 레이아웃 모델 교체
    • 강제 동기 레이아웃 이벤트 발생 방지
    • 빠른 연속 레이아웃 방지

• Paint
  • 변형 및 불투명도를 제외하고 모든 속성을 수정하면 그리기가 실행됩니다
  • 움직이는 요소 또는 그라데이션 요소의 그리기 레이어 개선
  • 그리기 영역 줄이기
  • 그리기의 복잡성 단순화

CSS 선택기 성능

• 선택기의 가장 오른쪽 끝이 이 선택기의 핵심 조건입니다(키 선택기 )
• 브라우저에서는 선택기를 오른쪽에서 왼쪽으로 일치시키므로 가능하면 더 구체적인 조건을 오른쪽 끝에 배치해야 합니다.
• * 규칙을 사용하지 마세요.
• 선택자는 최대한 짧아야 합니다.
• ID 선택자 앞에 한정자를 추가하지 마세요.
• 클래스 선택자를 한정하기 위해 태그 선택자를 사용할 필요는 없습니다.

더 많은 프로그래밍 관련 지식을 원하시면, 다음을 방문하세요:프로그래밍 시작하기! !

위 내용은 CSS의 우선순위, Stacking Context 등 고급 기능을 자세히 설명하면 CSS에 대한 이해가 깊어집니다! !의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!