CSS3의 calc() 메소드에 대하여

이 글은 주로 CSS3의 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 모든 선택 팁: 먼저 코드의 일부를 수정한 다음 실행을 누를 수 있습니다.]

사용 지침

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

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

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

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

지원 가능성

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

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS3에서 @keyframes 애니메이션 구현

CSS 배너 이미지의 반응형 중심 표시 방법 정보

CSS 테이블 레이아웃 속성 사용

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