为什么取消设置 max 和 min width/height css 属性需要不同的值？

Question

考虑这个 CSS:

min-height: none;
max-width: none;
max-width: auto;
min-height: auto;

这会产生以下 'Invalid property value' 个错误。

为什么 'unsetting' min-[prop] 需要 auto 值而取消设置 max-[prop] 需要 none 值？

我对规范中这一决定背后的基本原理很感兴趣。

Answer 1

none 值仅适用于 max-height / max-width。这是因为盒子的高度/宽度没有限制。因此，这些属性的默认值为 none.

none 值在 min-height / min-width 上是不允许的，因为盒子不能有负高度/宽度。因此，这些属性的默认值为 0.

规格参考：

Answer 2

实际上 min-height 和 min-width 的默认值是 0。

auto和none的意思不一样：

对于最大-[prop]， none是：盒子的height/width没有限制，能长多少就长多少。这不是自动的。它实际上没有限制，none.

对于 min-[prop]，auto 是："The default minimum size for flex items, providing a more reasonable default than 0 for other layouts"。什么是：min(0, x)，其中 x >= 0 并且 x 是最小大小 "acceptable element without having overflow"。这是一个自动自动调整。

Answer 3

我认为这背后有一些逻辑，因为元素必须具有最小高度，即使此高度为零。

相反，none 相对于 max-height 的使用是合乎逻辑的，（理论上）可以有无数个值，因为元素可以使用尽可能多的高度必要的。

规范的话：

none

(Only on 'max-height') No limit on the height of the box.

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

盒子的最大高度没有限制，它可以随心所欲地变大，但是盒子的最小高度有限制，因为它只能下降到零（负高度值是无效）。

在CSS 2.1中min-height的初始值为0，flexbox模块引入了auto作为初始值。 auto 起作用的原因是它计算 0 （如果未使用 flexbox 模型）有效地取消设置值：

auto

On a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. It otherwise computes to 0 (unless otherwise defined by a future specification).

Implied Minimum Size of Flex Items

为什么取消设置 max 和 min width/height css 属性需要不同的值？

Why unsetting max and min width/height css properties require different values?

css

specifications