CSS3의 calc() 사용법에 대한 자세한 설명

이 글은 주로 CSS 3의 calc() 메소드를 자세히 소개하고 있으며, 매우 훌륭하고 참고할만한 가치가 있습니다. 모두에게 도움이 되기를 바랍니다.

다음 코드는 CSS3의 calc() 메소드를 소개합니다. 구체적인 내용은 다음과 같습니다:

<p style="width:100px; height:50px; background:red;">
  <p style="width:100%; height:20px; margin:5px; background:green;"></p>
</p>

[Ctrl+A 모든 선택 팁: 코드의 일부를 먼저 수정한 다음 실행을 누를 수 있습니다.]

위와 같이 코드 미리보기에서 빨간색 상자가 초과된 것을 볼 수 있습니다. 표준 CSS에서는 너비에 여백이 포함되지 않기 때문입니다(이전 IE의 너비에는 여백이 포함됨).

위의 효과를 얻기 위해 일반적으로 중간에 또 다른 p 레이어를 배치합니다. (어떤 사람들은 그냥 width:100%를 제거하면 안 되나요? 진정하세요. 예를 들고 있는 것입니다. 실제로 일부에서는 케이스, 너비:100은 % 제거할 수 없습니다.)

더 편리한 것이 있나요? 대신 calc()를 사용하세요.

<p style="width:100px; height:50px; background:red;">
  <p style="width:calc(100% - 10px); height:20px; margin:5px; background:green;"></p>
</p>

[Ctrl+A 모든 선택 팁: 코드의 일부를 먼저 수정한 후 실행을 누르면 됩니다.]

사용 지침

• 지원: +, -, *, /, 혼합 지원 use

• 지원: %, px, em, rem 등.

• +, - 앞뒤에 공백이 있어야 합니다. 예: calc(100%-10px)는 올바르지 않으며 다음으로 변경해야 합니다. calc(100% - 10px)

• *, / 앞뒤에 공백이 필요 없지만 권장됩니다.
  

지원 가능성

모든 주요 데스크톱 브라우저가 이를 지원합니다. 모바일 브라우저에서는 거의 지원하지 않는다고 합니다.

관련 권장 사항:

CSS3의 새로운 속성 calc()에 대한 자세한 소개

CSS3의 calc()의 반응형 모드 레이아웃 방법 소개

CSS3의 calc() 속성을 사용하여 계산으로 크기 표현하기 수치 설명 ​​

위 내용은 CSS3의 calc() 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!