CSS3의 calc()는 무엇입니까? 계산()을 어떻게 사용하나요?

많은 사람들이 calc()가 무엇인지 모르기 때문에 오늘은 calc()를 먼저 배워보겠습니다. 먼저 calc()가 무엇인지부터 알아볼까요? 그 사람이 어떤 사람인지 아는 경우에만요? 실제 적용에서만 우리는 그것을 더 잘 사용할 수 있습니다. 그러면 다음 단계는 calc()에 관한 것입니다.

calc() 란 무엇인가요?

calc() 말 그대로 함수 함수로 이해할 수 있습니다. 실제로 calc는 영어단어 계산(calculate)의 약어로 CSS3의 새로운 기능으로 요소의 길이를 지정하는데 사용된다. 예를 들어 calc()를 사용하여 요소의 테두리, 여백, 패딩, 글꼴 크기 및 너비 속성에 대한 동적 값을 설정할 수 있습니다. 값을 얻기 위해 표현식을 사용하기 때문에 이를 동적 값이라고 부르는 이유는 무엇입니까? 하지만 calc()의 가장 큰 장점은 calc()를 통해 요소의 너비를 계산할 수 있다는 점이다.

calc()는 무엇을 할 수 있나요?

calc()를 사용하면 "width:calc(50% + 2em )"와 같은 백분율, em, px 및 rem 단위 값을 사용하여 div 요소의 너비 또는 높이를 계산할 수 있습니다. DIV 요소의 너비 값을 고려하고 이 귀찮은 작업을 브라우저에 맡겨서 계산하도록 하세요.

calc() 구문

calc() 구문은 매우 간단합니다. 마치 우리가 어렸을 때 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)을 배웠던 것처럼, 표현할 수학적 표현:

.elm {
  width: calc(expression);
}

여기서 "표현식"은 길이를 계산하는 데 사용되는 표현식입니다.

calc() 연산 규칙

calc()는 일반적인 수학 연산 규칙을 ​​사용하지만 더 스마트한 기능도 제공합니다.
1 "+", "-", "*" 및 "/" 연산의 네 가지 규칙을 사용합니다. ;
2. 백분율, px, em, rem 및 기타 단위를 사용할 수 있습니다.
3. 표현식에 "+"와 "-"가 있어야 합니다. "widht: calc(12%+5em)"와 같이 공백이 뒤에 오는 경우 공백 없이 쓰는 것은 잘못된 것입니다.
5. 표현식에 "*" 및 "/"가 있으면 공백이 있을 수 없습니다. 앞과 뒤에 있지만 공간을 남겨두는 것이 좋습니다.

브라우저 호환성

브라우저는 IE9+, FF4.0+, Chrome19+, Safari6+에서 잘 지원됩니다. 또한 각 브라우저 앞에 식별자를 추가해야 합니다. 하지만 안타깝게도 모바일 브라우저는 아직 "안드로이드 14.0용 파이어폭스"를 지원하지 않으며, 나머지 브라우저는 전멸되었습니다.

실제 사용에서는 브라우저 접두사

 .elm {
    /*Firefox*/
    -moz-calc(expression);
    /*chrome safari*/
    -webkit-calc(expression);
    /*Standard */
    calc();
 }

.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

도 추가해야 합니다.

calc 함수에서는 연산자 양쪽에 공백을 예약해야 하며 그렇지 않으면 함수에서 오류가 보고된다는 점에 유의할 가치가 있습니다.

위 내용은 CSS3의 calc()는 무엇입니까? 계산()을 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!