CSS 大小调整中的'min-content”和'max-content”有何不同？

了解 CSS 大小调整中的最小内容和最大内容

CSS 大小调整允许内部维度，例如最小内容和最大内容，这与外部维度（例如依赖于父框的百分比）不同。内在尺寸源自盒子本身内的内容。

盒子的内在尺寸

内在尺寸根据盒子的内容定义盒子的固有尺寸，无论它的位置在document.

min-content

min-content 值表示框的最小宽度，以避免溢出其内容。它相当于当盒子以其父盒子的零宽度浮动时会出现的宽度。例如，#red { width: min-content } 将给出与 #blue { float: left; 相同的宽度。 #蓝色> #red {宽度：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中文网其他相关文章！