CSS 内在大小调整中的'最小内容”和'最大内容”是什么？

内在尺寸：了解最小内容和最大内容

CSS 尺寸调整级别 3 引入了内在尺寸的概念，它是根据盒子内的内容计算的而不是它的父级。 min-content 和 max-content 是分别确定盒子的最小和最大尺寸的内在属性。

内在尺寸与外在尺寸

盒子的外在尺寸源自其父框的尺寸，例如宽度：80%。相反，内在尺寸，例如 width: min-content，由盒子本身内的内容决定。

定义 min-content 和 max-content

min-content :

• 避免内容的盒子的最小可能宽度溢出。
• 如果盒子内容较窄，就会发生溢出。

max-content:

• “理想” " 盒子的宽度，具有无限的可用空间。
• 盒子可以扩展以完全容纳其内容，而无需不必要的空白。

最小内容和最大内容是如何计算的？

要可视化最小内容，请考虑在更宽的包含框内放置一个浮动框（例如，#red）（例如，#blue)：

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

当#blue 的宽度为时，#red 的最小内容宽度等于其宽度0px，确保#red的内容不会溢出。

同样，对于最大内容，可视化#red漂浮在非常宽的#blue中：

#blue { width: 99999999999999999px; } /* ~infinite */

最大内容宽度当#blue 的宽度实际上是无限时，#red 等于其宽度，从而允许 #red 的内容完全展开。

附加内在属性

其他内在属性目前正在开发中，包括适合内容和拉伸。请继续关注其最终定义和实现的未来更新。

以上是CSS 内在大小调整中的'最小内容”和'最大内容”是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！