> 웹 프론트엔드 > CSS 튜토리얼 > CSS 내장 크기 조정에서 `min-content` 및 `max-content`는 무엇입니까?

CSS 내장 크기 조정에서 `min-content` 및 `max-content`는 무엇입니까?

Linda Hamilton
풀어 주다: 2024-11-24 01:38:09
원래의
943명이 탐색했습니다.
What are `min-content` and `max-content` in CSS Intrinsic Sizing?
내재 치수와 외부 치수

상자의 외부 치수는 다음에서 파생됩니다. 너비: 80%와 같은 상위 상자의 크기입니다. 이와 대조적으로 너비: 최소 콘텐츠와 같은 본질적인 크기는 상자 자체 내의 콘텐츠에 의해 결정됩니다.

최소 콘텐츠 및 최대 콘텐츠 정의

최소 콘텐츠 :

내용을 피하는 상자의 가능한 가장 작은 너비 넘칩니다.

상자 내용물이 더 좁으면 넘침이 발생합니다.

  • max-content:
"이상적" " 무제한의 사용 가능한 공간을 갖춘 상자 너비.

상자는 불필요한 부분 없이 내용물을 완전히 수용할 수 있도록 확장됩니다. 공백.

    최소 콘텐츠와 최대 콘텐츠는 어떻게 계산되나요?
  • 최소 콘텐츠를 시각화하려면 더 넓은 포함 상자(예: #red) 내의 부동 상자(예: #red)를 고려하세요. 예: #blue):
#red의 최소 콘텐츠 너비는 #blue의 너비가 다음과 같을 때 너비와 같습니다. 0px, #red의 내용이 넘치지 않도록 합니다.

마찬가지로 max-content의 경우 #red가 매우 넓은 #blue 내에 떠 있는 것을 시각화합니다.

#blue { width: 0px; }
#red { float: left; }
로그인 후 복사
max-content 너비는 #blue의 너비가 사실상 무한할 때 #red는 너비와 같으므로 #red의 내용이 완전히 확장될 수 있습니다.

추가 내장 특성

핏 콘텐츠와 신축성을 포함한 기타 고유 특성이 현재 개발 중입니다. 최종 정의 및 구현에 대한 향후 업데이트를 계속 지켜봐 주시기 바랍니다.
#blue { width: 99999999999999999px; } /* ~infinite */
로그인 후 복사

위 내용은 CSS 내장 크기 조정에서 `min-content` 및 `max-content`는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿