CSS3의 calc() 메소드를 사용하는 방법

이번에는 CSS3의 calc() 메소드를 사용하는 방법을 보여드리겠습니다. CSS3의 calc() 메소드를 사용할 때 notes란 무엇인가요?

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

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

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

The 위의 코드에서 미리보기 빨간색 상자가 초과된 것을 볼 수 있습니다. 표준 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 모든 선택 팁: 코드의 일부를 먼저 수정한 후 실행을 누르면 됩니다.]

사용 지침

• 지원: +, -, *, /, 혼합 사용 지원

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

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

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

지원 가능성

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

다시 그리기 및 리플로우를 사용하는 방법

CSS 설정을 사용하여 사용자 비밀번호를 기록하는 방법

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