CSS 계산 기능 안내서

CSS는 기본 수학 연산을 수행하기위한 특수 calc() 기능을 제공합니다. 이 안내서는이 매우 유용한 기능에 대해 아는 거의 모든 것을 다룰 것입니다.

예:

 .main-content {
  / * 100vh에서 80px를 빼십시오 */
  높이 : calc (100vh -80px);
}

이 안내서는이 실질적인 기능의 모든 측면으로 뛰어들 것입니다.

calc() 값에 사용됩니다

calc() 함수는 값 에만 사용할 수 있습니다. 다음 예는 여러 다른 속성의 값에 사용하는 방법을 보여줍니다.

 .el {
  글꼴 크기 : calc (3VW 2PX);
  너비 : calc (100% -20px);
  높이 : calc (100vh -20px);
  패딩 : calc (1VW 5PX);
}

예를 들어 부동산의 일부 에만 사용할 수 있습니다.

 .el {
  여백 : 10px calc (2VW 5PX);
  Border-Radius : 15px calc (15px / 3) 4px 2px;
  전환 : calc (1s -120ms) 변환;
}

재산의 일부를 형성하는 다른 기능의 일부일 수도 있습니다! 예를 들어, 다음은 그라디언트 컬러 척도에서 calc() 사용하는 예입니다.

 .el {
  배경 : #1E88E5 선형 그레이드 (
    바닥에
    #1e88e5,
    #1e88E5 calc (50% -10px),
    #3949AB Calc (50% 10px),
    #3949ab
  );
}

calc() 길이 및 기타 수치 값 에 사용됩니다

위의 모든 예는 자연에 기반을두고 있습니다. 우리는 숫자 사용에 대한 고려 사항에 대해 논의 할 것입니다 (때로는 단위가 필요하지 않기 때문에) 그러나 이것은 문자열이나 다른 유사한 것들이 아닌 수치 계산에 사용됩니다.

 .el {
  /* 아니요! */
  카운터 리셋 : calc ( "나의" "카운터");
}
.el :: 이전 {
  /* 아니요! */
  내용 : calc ( "Candyman" * 3);
}

그러나 CSS는 길이의 많은 단위를 가지고 있으며 모두 calc() 와 함께 작동합니다.

• px
• 비율
• 여자 이름
• rem
• ~에
• mm
• cm
• Pt
• PC
• 전-
• ch
• VH
• 폭우
• vmin
• vmax

단위 번호는 허용되지 않습니다. 예를 들어 line-height: calc(1.2 * 1.2); transform: rotate(calc(10deg * 5)); .

계산을 수행 할 수 없으며 여전히 작동합니다.

 .el {
  / * 조금 이상하지만 */
  너비 : calc (20px);
}

미디어 쿼리에는 적용되지 않습니다

calc() 올바르게 사용될 때 (길이 단위는 속성 값으로 사용됩니다), 불행히도 calc() 미디어 쿼리에 적용될 때 작동하지 않습니다.

 @Media (max-width : 40rem) {
  / * 좁거나 정확히 40REM */
}

/* 아니요! */
@Media (min-width : calc (40rem 1px)) {
  / * 40REM 이상의 너비 */
}

상호 배타적 인 미디어 쿼리를 다소 논리적 인 방식으로 수행 할 수 있으므로 향후 구현 될 수 있다면 시원 할 것입니다 (위와 같이).

혼합 장치?

이것은 아마도 calc() 의 가장 귀중한 특징 일 것입니다! 위의 거의 모든 예는이 작업을 수행했지만이를 강조하기 위해 여기에는 다른 단위가 혼합되어 있습니다.

 /* 픽셀 단위와 혼합 된 백분율 단위*/
너비 : calc (100% -20px);

이것은 요소 너비만큼 넓고 마이너스 20 픽셀을 의미합니다.

유체 폭의 경우 픽셀만으로 값을 미리 계산하는 것은 불가능합니다. 다시 말해, Sass calc() 같은 도구를 사용하여 Polyfill을 완성하려고 시도 할 수는 없습니다. 물론 브라우저가 잘 지원 하므로이 작업을 수행 할 필요가 없습니다. 그러나 요점은 이런 식으로 유닛을 혼합 할 때 calc() 의 대부분이있는 브라우저 ( "런타임") 에서이 작업을 수행해야한다는 것입니다.

다음은 혼합 장치의 다른 예입니다.

 변환 : 회전 (calc (1Turn 45deg));

애니메이션-지연 : calc (1s 15ms);

혼합 된 장치가 런타임에 결정된 것과 아무 관련이 없기 때문에 전처리 될 수 있습니다.

전처리 수학과의 비교

우리는 당신 calc() 할 수없는 가장 유용한 행동을 다루었습니다. 그러나 약간의 중복이 있습니다. 예를 들어 Sass는 수학 내장이 있으므로 다음을 수행 할 수 있습니다.

 $ 패딩 : 1REM;

.el [data-padding = "extra"] {
  패딩 : $ 패딩 2REM; // 처리는 3REM입니다.
  마진 바닥 : $ 패딩 * 2; // 2REM으로 처리;
}

유닛을 사용한 수학적 작업조차도 거기에서 작동하여 동일한 유닛의 값을 하나로 추가하거나 유닛이없는 숫자를 곱합니다. 그러나 단위를 혼합 할 수 없으며 calc() 와 비슷한 제한이 있습니다 (예 : 곱셈 및 부서는 단위가없는 숫자를 사용해야합니다).

수학 작업을 보여줍니다

calc() 에만 고유 한 기능을 사용하지 않더라도 CSS에서 "작업 표시"에 사용하는 데 사용할 수 있습니다. 예를 들어, 요소 너비의 정확한 ^1⁄ _7을 계산해야한다고 가정 해…

 .el {
  /* 이해하기 쉽습니다*/
  너비 : calc (100% / 7);

  /* 이보다 이해하기가 더 쉽습니다*/
  너비 : 14.2857142857%;
}

이것은 예를 들어 어떤 종류의 자체 제작 된 CSS API에서 작동 할 수 있습니다.

 [data-columns = "7"] .col {너비 : calc (100% / 7); }
[data-columns = "6"] .col {너비 : calc (100% / 6); }
[data-columns = "5"] .col {너비 : calc (100% / 5); }
[data-columns = "4"] .col {너비 : calc (100% / 4); }
[data-columns = "3"] .col {너비 : calc (100% / 3); }
[data-columns = "2"] .col {너비 : calc (100% / 2); }

calc() 의 수학 연산자

당신은, -, * 및 /가 있습니다. 그러나 그것들은 다르게 사용됩니다.

추가 () 및 뺄셈 (-)은 두 숫자 모두 길이가 필요합니다.

 .el {
  /* 효율적인? */
  마진 : calc (10px 10px);

  /* 유효하지 않은? */
  마진 : calc (10px 5);
}

잘못된 값은 전체 단일 선언을 무효화합니다.

Division (/)은 두 번째 숫자에 단위가 없음을 요구합니다.

 .el {
  /* 효율적인? */
  마진 : calc (30px / 3);

  /* 유효하지 않은? */
  마진 : calc (30px / 10px);

  /* 유효하지 않은? (0으로 나눌 수 없음) */
  마진 : calc (30px / 0);
}

곱하기 (*)에는 숫자 중 하나에 단위가 없어야합니다.

 .el {
  /* 효율적인? */
  마진 : calc (10px * 3);

  /* 효율적인? */
  마진 : calc (3 * 10px);

  /* 유효하지 않은? */
  마진 : calc (30px * 3px);
}

공간이 중요합니다

글쎄, 그것은 추가 와 뺄셈 에 해당됩니다.

 .el {
  /* 효율적인? */
  글꼴 크기 : calc (3VW 2PX);

  /* 유효하지 않은? */
  글꼴 크기 : calc (3VW 2PX);

  /* 효율적인? */
  글꼴 크기 : calc (3VW -2PX);

  /* 유효하지 않은? */
  글꼴 크기 : calc (3VW-2PX);
}

음수는 정상입니다 (예 : calc(5vw - -5px) ) 그러나 이것은 공간이 필요할뿐만 아니라 도움이 필요한 예입니다.

Tab Atkins는 공간이 필요한 이유는 실제로 구문 분석 문제라고 말합니다. 나는 그것을 완전히 이해할 수는 없지만, 예를 들어, 2px-3px "2"와 "px-3px"숫자로 구문 분석되며, 누구에게도 좋지 않으며 "숫자 문법"으로 소비되는 것과 같은 다른 문제가 있습니다. 나는 공간이 --- 사용자 정의 속성의 구문과 관련되어야한다고 생각했지만 그렇지 않았다!

곱셈과 나누기에는 연산자 주변의 공간이 필요하지 않습니다. 그러나 좋은 일반적인 조언은 가독성과 다른 운영자의 근육 기억을위한 공간을 포함시키는 것입니다.

외부 주변의 공간은 중요하지 않습니다. 원한다면 라인을 방해 할 수도 있습니다.

 .el {
  /* 효율적인? */
  너비 : calc (
    100% / 3
  );
}

그러나 이것에주의하십시오. calc() 과 열린 괄호 사이에는 공간이 없습니다.

 .el {
  /* 유효하지 않은? */
  너비 : calc (100% / 3);
}

중첩 calc(calc());

당신은 이것을 할 수 있지만 결코 필요하지 않습니다. calc() 부분을 사용하지 않고 추가 괄호 세트 만 사용하는 것과 동일합니다. 예를 들어:

 .el {
  너비 : calc (
    계산 (100% / 3)
    -
    calc (1rem * 2)
  );
}

괄호가 별도로 작동 할 수 있으므로 calc() 내부에 이러한 사항이 필요하지 않습니다.

 .el {
  너비 : calc (
   (100% / 3)
    -
   (1REM * 2)
  );
}

이 경우, "운영 순서"는 괄호가 없어도 우리를 도울 수 있습니다. 즉, 분열과 곱셈이 먼저 (추가 및 뺄셈 전) 발생하므로 괄호가 전혀 필요하지 않습니다. 다음과 같이 쓸 수 있습니다.

 .el {
  너비 : calc (100% / 3-1REM * 2);
}

그러나 괄호가 선명도가 높아지면 자유롭게 사용하십시오. 운영 순서가 나에게 좋지 않은 경우 (예 : 먼저 추가하거나 빼야 함) 브래킷이 필요합니다.

 .el {
  /* 이것*/
  너비 : calc (100% 2REM / 2);

  /* 이것과 매우 다릅니다*/
  너비 : calc ((100% 2REM) / 2);
}

CSS 사용자 정의 속성 및 calc() ?

calc() 의 놀라운 능력과는 별도로 calc() 에 대한 다음으로 가장 좋은 점은 사용자 지정 속성과 함께 사용하는 것입니다. 사용자 정의 속성은 계산에 다음으로 사용하는 값을 가질 수 있습니다.

 html {
  -스페이스 : 10px;
}

.Module {
  패딩 : calc (var (-spacing) * 2);
}

CSS 사용자 정의 속성을 설정 한 다음 나머지 CSS가 필요에 따라 사용하도록하여 많은 구성이 상단에서 수행되는 CSS 설정을 상상할 수 있다고 생각합니다.

사용자 정의 속성도 서로 참조 할 수 있습니다. 다음은 일부 수학 작업을 사용하는 예입니다 ( calc() 함수가 먼저 누락 되었음 )가 나중에 적용됩니다. (결국 calc() 안에 있어야합니다.)

 html {
  -스페이스 : 10px;
  -Spacing-L : var (-spacing) * 2;
  -Spacing-XL : var (-spacing) * 3;
}

.Module [data-spacing = "xl"] {
  패딩 : calc (var (-spacing-xl));
}

해당 속성에 대해 calc() 기억하고 사용해야하기 때문에 그렇게 마음에 들지 않을 수도 있지만, 이는 가능하며 가독성 관점에서 흥미로울 수 있습니다.

맞춤 속성은 HTML에서 나올 수 있으며 때로는 매우 시원하고 유용한 것입니다. (예제/chars에 인덱스를 추가하는 방법을 splitting.js 참조).

<div style="--index: 1;"> ...</div>
<div style="--index: 2;"> ...</div>
<div style="--index: 3;"> ...</div>

 div {
  /* 인덱스 값은 HTML (폴백 포함)에서 제공됩니다*/
  애니메이션-지연 : calc (var (-색인, 1) * 0.2s);
}

나중에 단위를 추가하십시오

단위가없는 숫자를 저장하거나 수학에 대한 단위가없는 숫자를 미리 사용하는 것이 더 쉬운 상황에있는 경우, 단위를 1 과 단위 로 곱하여 단위를 추가하기 전에 숫자가 적용될 때까지 항상 기다릴 수 있습니다.

 html {
  -임마 턴버 : 2;
}

.el {
  /* 숫자는 2에 남아 있지만 이제 단위가 있습니다*/
  패딩 : calc (var (-중요한 것은) * 1rem);
}

처리 색상

RGB 및 HSL과 같은 색상 형식에는 calc() 로 처리 할 수있는 숫자가 있습니다. 예를 들어, 기본 HSL 값을 설정 한 다음 자신이 만든 시스템을 형성하도록 변경합니다 (예).

 html {
  -H : 100;
  --s : 100%;
  --l : 50%;
}

.el {
  배경 : HSL (
    calc (var (-h) 20),
    calc (var (-S) -10%),
    calc (var (-L) 30%)
  ))
}

calc() 와 attr() 결합 할 수 없습니다.

CSS의 attr() 함수는 HTML에서 속성 값을 추출하여 사용할 수있는 것처럼 매력적으로 보입니다 . 하지만……

<div data-color="red"> ...</div>

 div {
  /* 아니요*/
  색상 : attr (데이터 콜로);
}

불행히도, 여기에는 "유형"이 없으므로 attr() content 속성과 함께 사용되는 문자열에만 사용됩니다. 이것은 이것이 효과가 있음을 의미합니다.

 div :: 이전 {
  내용 : att (data-color);
}

예를 들어 계산을 위해 이런 식으로 숫자를 추출하려고 시도 할 수 있기 때문에 이것을 언급했습니다.

<div data-columns="7" data-gap="2"> ...</div>

 .grid {
  디스플레이 : 그리드;

  /* 이들 중 어느 것도 작품*/
  그리드-템플릿-컬럼 : 반복 (attr (data-columns), 1fr);
  그리드 갭 : calc (1rem * attr (data-gap));
}

다행히도 HTML의 사용자 정의 속성이 유용하거나 유용하기 때문에 이것은 중요하지 않습니다!

<div style="--columns: 7; --gap: 2rem;"> ...</div>

 .grid {
  디스플레이 : 그리드;

  /* 할 수 있다! */
  그리드-템플릿-컬럼 : 반복 (var (-열), 1fr);
  그리드 갭 : calc (var (-GAP));
}

브라우저 도구

브라우저 DevTools는 스타일 시트에서 만든 calc() 보여주는 경향이 있습니다.

계산 된 값을 찾아야하는 경우, "계산"탭 (모든 브라우저 DevTools, 적어도 내가 아는 것)이 있습니다.

브라우저 지원

이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿 PC

매우 오래된 버전 (예 : IE 8 또는 Firefox 3.6)을 지원 해야하는 경우 일반적인 요령은 calc() 의 속성 또는 값을 사용하기 전에 다른 속성 또는 값을 추가하는 것입니다.

 .el {
  너비 : 92%; /* 폴백*/
  너비 : calc (100% -2REM);
}

calc() 알려진 몇 가지 문제가 있지만 모두 오래된 브라우저를위한 것입니다. 사용해도 될까요… 13이 나열되어 있습니다. 여기 몇 가지가 있습니다.

• 파이어 폭스
• IE 9-11 calc() 값으로 사용할 때 box-shadow 속성은 렌더링되지 않습니다.
• IE 9-11 또는 가장자리지지 width: calc() 테이블 셀의 경우입니다.

사용 사례

나는 일부 CSS 개발자들이 calc() 얼마나 오래 사용했는지 물어서 다른 사람들이 매일 작업에서 어떻게 사용하는지에 대한 좋은 아이디어를 얻을 수있었습니다.

이를 사용하여 전체 화면 유틸리티 클래스를 만듭니다 .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } calc() 내 CSS 항목 중 하나에 속한다고 생각합니다.

나는 그것을 사용하여 끈적 끈적한 바닥 글을위한 공간을 만듭니다.

유체 유형/동적 타이포그래피를 설정하는 데 사용합니다. 최소, 최대 및 뷰포트 단위 변화에 따라 글꼴 크기가 계산됩니다. 글꼴 크기뿐만 아니라 라인 높이도 마찬가지입니다.

뷰포트 장치 등과 관련된 유체 유형 케이스의 일부로 calc() 사용하는 경우 REM 또는 EM을 사용하는 장치를 포함하여 사용자가 필요에 따라 확대하거나 축소하여 글꼴 위 또는 아래로 조정을 제어 할 수 있도록하십시오.

내가 정말 좋아하는 하나는 "콘텐츠 너비"사용자 정의 속성을 갖는 다음이를 사용하여 필요한 간격을 만듭니다 .margin { width: calc( (100vw - var(--content-width)) / 2); }

크로스 브라우저 이니셜 싱크 구성 요소를 만드는 데 사용합니다. 이것은 부분입니다 :

.drop-cap { --drop-cap-lines: 3; font-size: calc(1em * var(--drop-cap-lines) * var(--body-line-height)); }

기사 페이지에서 일부 이미지가 컨테이너를 오버플로 만드는 데 사용합니다.

패딩 및 VW/VH 장치와 결합하여 페이지에 시각화를 올바르게 배치하는 데 사용합니다.

나는 그것을 사용하여 background-position 의 한계, 특히 그라디언트에서 컬러 마커의 위치 제한을 극복하는 데 사용합니다. 예를 들어, "중지는 하단에서 0.75EM입니다".

다른 팁

• 미디어 쿼리없이 단일 열로 변환 할 수있는 2 열 그리드
• 종횡비와 유사한 영웅 구성 요소
• 강제 높은 대비 색상
• 백분율에 따라 클립 경로의 좌표를 돕습니다

출력은 요청대로 원래 이미지 형식과 배치를 유지합니다. 본문은 핵심 의미를 유지하면서 독창성을 위해 해당 및 재구성되었습니다.

위 내용은 CSS 계산 기능 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!