CSS를 알아야합니다. CSS 기술을 레벨링하는 내 질문

안녕하세요 여러분!

CSS는 많은 테마를 다루며 개발자는 모든 것을 완전히 파악할 수 없습니다. 우리가 모든 지식에 능숙 할 필요는 없지만 일부 CSS 기본 지식이 필수적입니다. 내 문제는 이러한 핵심 지식 포인트를 중심으로 발전시키는 것입니다.

이러한 문제는 초보자에게는 적어도 1 년의 CSS 경험이 필요하며 2 년 동안 더 좋습니다. 특정 경험만으로는 이러한 문제의 의도를 더 잘 이해할 수 있습니다.

Github에서 프로젝트의 개발 진행 상황을 따를 수도 있습니다.

시작!

> 참고 : "계산 값"이라는 용어를 사용합니다.이 용어는 개발자 도구 "Calculation"탭에 표시된 속성 값을 나타냅니다. <..> 다음 선택기의 특성은 무엇입니까?

의사 -기능은 브라우저가 주어진 선택기 목록에서 가장 높은 특집 선택기를 선택하는 데 도움이됩니다. 이 예에서 가장 중요한 선택기는

입니다. 선택기의 특성은 (0, 1, 0, 0)입니다. 이것은 전체 에 적용됩니다.

속성의 계산 값은 입니다. 맞습니까?

맞습니다. pseudo -pseudo- 기능은 특성을 0으로 만듭니다. 따라서 선택기의 특성이 더 높습니다. 이것이 바로 속성의 계산 값이

인 이유입니다.

다음 예에서 어떤 모양이 표시됩니까?

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

요소의 속성이 인 경우 및 속성이 유효하지 않습니다. 우리는 광장이나 아무것도 보지 못할 것입니다. :is() 요소의 #container 속성 계산 값의 알고리즘은 무엇입니까? @规则

사례 1 : 요소는 블록 레벨 요소입니다. 그들의 color 속성은 부모 요소의 red 속성과 동일합니다.

사례 2 : 요소는 탄성 항목입니다. 그들의

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

속성은 내용에 따라 계산됩니다.

의사 요소의 :where() 속성의 계산 값은 얼마입니까? .container color 및 red. 또는 값은 자식 요소의

속성의

값을

대체 값으로 변환합니다.

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

부모 요소의 경우 및 display의 경우 자식 요소의 기본 위치의 차이점은 무엇입니까? inline 의 상위 요소 내부에서 하위 요소가 순서대로 표시됩니다. 대신, 의 경우, 요소는 하나씩 표시됩니다. width 요소의

및 .child 속성의 계산 값은 얼마입니까? width height

요소의

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

속성은 부모 요소의

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

속성과 동일합니다. 따라서

속성의 계산 값은 1600px입니다. (브라우저의 기본 글꼴 크기가 16px, 100rem = 100 * 16px = 1600px라고 가정합니다) > 의 부모 요소 내에서 속성은 모든 공간을 채 웁니다. 상위 요소에 여러 항목이 있으면 공간이 평균에 할당됩니다. 따라서 요소의 .child 속성의 계산 값은 20REM / 2 = 10REM, 즉 10 * 16 = 160px입니다. width 요소의 경계 거리는 모든 경우에 부모 요소를 초과합니다. 맞습니까? width width

오류. >, , display: grid 및 sub -marginal 거리는 상위 요소를 초과하지 않습니다. height 경계가 .child 및 height의 요소에 접히는가?

아니요, 유효하지 않습니다. , , 및

의 요소 내부에서 국경 거리가 축적됩니다. .child

의사 요소의 위치는 수평적이고 수직입니다. 맞습니까?

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

맞습니다. 브라우저는 하위 요소와 부모 요소 사이의 모든 공간을 할당합니다.

속성의 계산 값은 얼마입니까? display: flex display: inline-flex display: grid 의 초기 값은 display: inline-grid입니다. 따라서

요소의 계산 값은 입니다.

그러나 그러나 , , , 또는 display: inline-flex 값은 요소에 대해 정의되면, 하위 요소의 display: inline-grid 계산 값은 0입니다.

우리는 속성을 ​​어떻게 대체하기 위해 속성을 사용합니까?

display: flex 요소에 대한 display: inline-flex 속성을 ​​정의해야합니다. display: grid 속성의 계산 값은 입니다. 맞습니까? display: inline-grid

맞습니다. 또는 >> 값이 정의되면 브라우저는 속성의 모든 대체 값으로 변환합니다.

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

요소의

속성의 계산 값은 왜?

min-width 또는

가있는 요소는 일반 문서 스트림에서 제거됩니다. 따라서 부모 요소는 그것을 볼 수 없습니다. 이것이 바로 속성의 계산 값이 0 인 이유입니다.

<code class="language-css">.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}</code>

다음 예에서

속성의 역할은 무엇입니까? isolation

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

우리는

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

속성이 사용될 때 브라우저가 사용하는 것을 쌓는 것을 기억해야합니다.

기본적으로 루트 스태킹 컨텍스트는 z-index 요소입니다. 의사 요소가 없이

요소 뒤에있는 이유입니다.

우리는 속성을 ​​사용하여 요소에 대한 새로운 스택 컨텍스트를 만듭니다. 따라서 의사 요소는 텍스트 뒤에 표시되지만 html 요소 앞에 표시됩니다. isolation: isolate 의사 요소의 위치는 무엇입니까? .parent

우선,

, 의사 요소가 중앙에 표시되기 때문입니다. isolation 응용 프로그램 및 이후에 .child, .parent 및

속성의 우선 순위가 있기 때문에 y 축을 따라 부모 요소의 하단 테두리로 이동합니다.

속성보다 높습니다.

속성의 계산 값은 얼마입니까?

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

속성의 우선 순위는 속성보다 높지만 그 값은 place-items: center 및

속성 범위 내에 있어야합니다. 따라서 대답은 225px입니다.

속성의 계산 값은 얼마입니까? position: absolute bottom: 0 CSS 사용자 정의 속성을 사용할 때는 모든 약식 부품을 정의해야합니다. 이 작업을 수행하지 않으면 브라우저를 사용할 수 없습니다. top 이것은이 예에서 일어났습니다. 약어에는 4 개의 값이 필요하지만 3 명의 개발자 만 정의됩니다. 브라우저를 설정할 수 없습니다. 따라서 계산 값은 0입니다. right 요소의 bottom 속성의 계산 값은 왜? left place-items CSS 사용자 정의 속성은 상위 요소로 정의 된 동일한 사용자 정의 속성 상속 값에서 나옵니다. 사용자 정의 속성이 생략되면 브라우저는 리턴 값을 사용합니다.

이 예에서는

속성이 상위 요소에서 생략됩니다. 따라서 브라우저는 환불 값, 즉 width 키워드,

요소의

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

속성에서 키워드를 사용하여 녹색 값을 상속합니다.

이 회복 된 출력은 원래 이미지 형식을 유지하고 의미에 대한 상당한 변경을 피하면서 텍스트를 개선하여 질문이 더 간결하고 조직화 된 방식으로 제시됩니다

위 내용은 CSS를 알아야합니다. CSS 기술을 레벨링하는 내 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!