CSS `min-content` 및 `max-content`는 요소 크기를 어떻게 결정합니까?

CSS에서 'min-content' 및 'max-content' 기능 탐색

CSS의 고유 크기 이해

CSS에서 내적 차원과 외적 차원을 구별하는 것이 중요합니다. 'min-content' 및 'max-content'와 같은 기본 차원은 요소 자체에 고유한 속성입니다. 반면 '너비: 80%;'와 같은 외부 크기는 상위 요소의 크기를 기준으로 계산됩니다.

'최소 콘텐츠' 정의

CSS Sizing Level 3에 따라 , 'min-content'는 내용이 넘치지 않도록 하는 요소의 가능한 가장 작은 너비 또는 높이를 나타냅니다. 요소 내에서 가장 긴 텍스트 또는 콘텐츠의 너비를 수용하도록 동적으로 조정됩니다.

'max-content' 이해

반면, 'max-content'는 요소의 이상적인 크기를 나타냅니다. 무제한의 사용 가능한 공간으로 특정 축에서. 사용되지 않는 공간 없이 요소의 콘텐츠를 완전히 포함하는 최소 너비 또는 높이를 나타냅니다.

플로팅 요소를 사용한 시각화

'최소 콘텐츠' 개념을 보여주는 다음 코드 예제를 살펴보세요. :

#blue {
  width: 0px;
}
#blue > #red {
  float: left;
}

이 시나리오에서는 #blue 요소의 너비가 0픽셀에 가까워질수록 #red 요소의 너비는 #red 내의 텍스트 내용이 오버플로될 때까지 그에 따라 축소됩니다. 이때 'min-content' 너비는 #red의 너비입니다.

무한 공간을 사용한 데모

'max-content'를 설명하기 위해 다음 예에서는 매우 큰 너비를 할당합니다. to #blue:

#blue {
  width: 99999999999999999px;
}
#blue > #red {
  float: left;
}

이 경우 #blue의 너비는 본질적으로 무한해지기 때문에 #red의 너비는 사용되지 않은 내용을 수용할 수 있도록 확장됩니다. 공간. 이 너비를 'max-content' 너비라고 합니다.

관련 속성에 대한 지속적인 개선

'fit-content' 및 'stretch'와 같은 기타 관련 속성은 현재 개발 중입니다. 향후 기능이 변경될 수 있습니다. 정의가 안정화되면 이 설명에 포함됩니다.

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