내 CSS `calc()` 기능이 작동하지 않는 이유는 무엇입니까?

CSS calc() 함수가 작동하지 않는 이유는 무엇입니까?

CSS calc() 함수를 사용할 때, 특히 다음과 같은 경우에 문제가 발생할 수 있습니다. px 단위가 포함된 표현식을 빼려고 합니다. 이는 연산자 사이에 공백을 포함하는 것을 잊어버리는 일반적인 실수로 인해 발생할 수 있습니다.

표기법 수정:

이 문제를 해결하려면 공백을 구분하는 것이 있는지 확인하세요. calc() 표현식의 연산자. 예를 들어 calc(100vw/4-(10px-4)) 대신 calc(100vw/4 - (10px - 4))를 사용합니다.

중첩 계산:

calc() 함수를 사용하면 아래 예에서 볼 수 있듯이 괄호 안에 계산을 중첩할 수 있습니다.

<code class="css">.one {
  width: calc(100% - 150px);
  margin-top: calc(20px + calc(40px * 2)); /* Same as calc(20px + (40px * 2)) */
}</code>

동적 계산 관리:

SASS에서 루프의 경우 다음 접근 방식을 사용하여 calc(100vw/x-(10px-x))에서 x를 동적으로 바꿀 수 있습니다.

<code class="sass">@for $i from 1 through 4 {
  .item-#{$i} {
    width: calc(100vw/#{$i} - (10px - #{$i}));
  }
}</code>

위 내용은 내 CSS `calc()` 기능이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!