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

Calc() 함수 문제: 작동하지 않는 이유

calc(100vw/4) 함수는 예상대로 작동하지만 다른 함수는 중요한 요소인 공백 때문이 아닙니다.

CSS calc() 함수에는 연산자 사이에 공백이 필요합니다. 일반적인 오류에는 이러한 공백을 생략하여 유효하지 않은 표현식이 나타나는 경우가 포함됩니다.

예를 들어 calc(100vw/4-(10-4)) 표현식은 "-"와 괄호 사이에 공백이 없기 때문에 유효하지 않습니다. 대신 다음과 같아야 합니다: calc(100vw/4 - (10 - 4)).

중첩된 Calc() 함수

calc() 함수를 다음과 같이 중첩할 수 있습니다. 필요에 따라 여러 번 수행하지만 괄호와 동일한 방식으로 작동합니다. 예:

<code class="css">calc(100vw/4 - calc(10px - 4px))</code>

다음과 동일:

<code class="css">calc(100vw/4 - (10px - 4px))</code>

예

다음은 중첩된 calc() 함수의 예입니다.

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

이 예에서 margin-top 속성은 중첩된 calc() 함수를 사용하여 40px에 2를 곱한 결과에 20px을 더합니다.

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