집 > 기사 > 웹 프론트엔드 > CSS `min-content` 및 `max-content`는 요소 크기를 어떻게 결정합니까?

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

How Do CSS `min-content` and `max-content` Determine Element Dimensions?

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

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

CSS Sizing Level 3에 따라 , 'min-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' 너비라고 합니다.