왜 최대 및 최소 너비/높이 CSS 속성을 설정 해제하면 다른 값이 필요합니까?</p> <pre><code>min-height: none; max-width: none; max-width: auto; min-height: auto; </code></pre> <p>이 다음과 같은 '속성 값이 잘못되었습니다'오류를 얻을 :

Question

이 CSS를 생각해 보자.

왜 max-[prop]를 설정 해제하면 none 값을 요구하면서 '반환하기'min-[prop]이 auto 값을 필요로한다는 것이다?

스펙에서이 결정의 근거가되는 흥미로운 부분이 있습니다.

Answer 1

none 값은 max-height/max-width에만 적용됩니다. 상자의 높이/너비에 제한이 없기 때문입니다. 따라서 이러한 속성의 기본값은 none입니다.

상자의 높이/너비가 음수 일 수 없으므로 min-height/min-width에는 none 값이 허용되지 않습니다. 따라서 이러한 속성의 기본값은 0입니다.

사양 참조 : 최소 높이 및 최소 폭

• 10.4 Minimum and maximum widths: min-width and max-width
• 10.7 Minimum and maximum heights: min-height and max-height

Answer 2

실제로 디폴트 값 0이다. 된 Max [소품]의

, none이다 :

auto 및 none하지 같은 의미를 상자의 높이/폭에 제한이, 그만큼이 가능한 한 증가하지 않는다. 자동이 아니에요. 말 그대로 아무런 제한도 없습니다.

분 - [prop]의 경우 auto은 "다른 레이아웃에 대해 0보다 적절한 기본값을 제공하는 유연한 항목의 기본 최소 크기"입니다. 설명 : min (0, x), 여기서 x> = 0이고 x는 최소 크기 인 "overflow없이 허용 가능한 요소"입니다. 자동 matic 조정입니다.

Answer 3

이이 높이가 0 인 경우에도 최소 높이를 갖기 때문에이 배후에 논리가 있다고 생각합니다.

반대로, max-height과 관련하여 none의 사용은 논리적이며, 이론적으로 요소가 필요한만큼의 높이를 사용할 수 있으므로 무한한 값이 있습니다. 스펙의 말에

: (만 '최대 높이'에)

없음

상자의 높이에 제한이 없습니다.

Minimum and maximum heights: 'min-height' and 'max-height'

이 그것을 원하는만큼 클 수있는 상자의 최대의 높이에는 제한이 없지만, 그것은 단지까지 갈 수 박스의 최소 높이에 제한이 0 (음의 높이 값은 유효하지 않습니다).

CSS 2.1에서 초기 값 min-height은 0이고, flexbox 모듈은 auto을 초기 값으로 도입했습니다. 오버 플로우 메인에서 볼 수있는 플렉스 항목에

자동

: auto 작품 효과적으로 값을 설정 해제합니다 (인 flexbox 모델을 사용하지 않을 경우)가 0로 계산한다는 것입니다 이유 flex 축의 주축 최소 크기 속성에 이 지정되면 자동 최소 크기를 지정합니다. 그렇지 않으면 0으로 계산됩니다 (그렇지 않은 경우가 아니면 은 향후 사양으로 정의됩니다).

Implied Minimum Size of Flex Items