>  기사  >  웹 프론트엔드  >  CSS 크기 조정에서 `min-content`와 `max-content`는 어떻게 다릅니까?

CSS 크기 조정에서 `min-content`와 `max-content`는 어떻게 다릅니까?

Barbara Streisand
Barbara Streisand원래의
2024-11-21 16:27:10514검색

How Do `min-content` and `max-content` Differ in CSS Sizing?

CSS 크기 조정의 최소 콘텐츠 및 최대 콘텐츠 이해

CSS 크기 조정은 최소 콘텐츠 및 최대 콘텐츠와 같은 고유한 크기를 허용합니다. 이는 상위 상자에 의존하는 백분율과 같은 외부 차원과 다릅니다. 고유 치수는 상자 자체에 들어 있는 내용물에서 비롯됩니다.

상자의 고유 치수

내재 치수는 상자 내부의 내용물에 관계없이 상자의 고유 크기를 정의합니다. 그 위치는 document.

min-content

min-content 값은 내용이 넘치지 않도록 상자의 최소 너비를 나타냅니다. 이는 상자가 상위 상자의 너비가 0인 경우 발생하는 너비와 같습니다. 예를 들어, #red { width: min-content }는 #blue { float: left; #파란색 > #빨간색 { 너비: 0px } }. 이 시나리오에서 min-content는 #red 내부의 텍스트가 넘치지 않도록 보장합니다.

max-content

max-content는 다음과 같은 상자의 이상적인 너비를 계산합니다. 무한한 사용 가능한 공간. 박스가 내용물을 넘치지 않게 감싸면서 빈 공간을 최소화하는 최소 크기를 나타냅니다. min-content와 마찬가지로 float: #blue { float: left; #파란색 > #red { 너비: 최대 콘텐츠 } }. 이 경우 max-content를 사용하면 #red가 #blue 내 x축의 사용 가능한 공간을 넘치지 않고 충분히 활용할 수 있습니다.

다른 속성 상태

속성 Fit-content 및 Stretch와 같은 기능은 아직 개발 중이며 사양은 향후 변경될 수 있습니다. 좀 더 안정된 상태가 되면 이 토론에 추가될 예정입니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.