位置: IT常识 - 正文

【CSS】fit-content, min-content, max-content, fill-available 详解与异同(css content \f041)

编辑：rootadmin

本文对 CSS 中有关大小的四种自适应大小表现进行了解释与区别，它们分别是 fit-content, min-content, max-content, fill-available。相对而言，本文较为严谨，即尽量地无遗漏、无歧义。在严谨的同时，也做到尽可能通俗易懂。 ... 设定为了描述方面，我们将以 width 举例设定三层元素，他们层层嵌套，分别称作：inner, container, outer。如下所示：outer

container

inner

三层元素都有几种情况：outer有限制例如，设置了 width 或 max-width 为固定值无限制例如，将 width 设置为根据内容变化的值，且长度可以无限增加containerfit-content, min-content, max-content, fill-available 四种。其中 fit-content, min-content, max-content 为 width, height 等 CSS 属性的可选值，fill-available 是指 width, height 等为 auto 时的表现。inner固定宽度设置了固定的 width文本该层为可换行的文本，其宽度可长可短。随父元素变化例如 width 为 100%文中会出现 inner + container < outer 这种类似表达式的表述方式。这里 inner 指其包括 margin 在内的总宽度；container 指其 padding + border + margin 的宽度，不含 width；outer 在有限制时，指其达到限制时 width 的宽度，在无限制时，表示无限大。fit-content, min-content, max-content

推荐整理分享【CSS】fit-content, min-content, max-content, fill-available 详解与异同(css content \f041)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:cssleft,css fit,css fit,css justify-content,css content,css fit,css content \f041,css content \f041,内容如对您有帮助，希望把文章链接给更多的朋友！

首先，当 container 设置为这三个值时，不管其他情况如何变化，其宽度始终贴合 inner，即使 inner + container 的宽度超出了 outer 的限制也是如此（超出时，网页的表现由 overflow 属性决定）。三者的不同体现在对 inner 宽度的影响上，下面对此分类讨论。

inner 为固定宽度此时三个属性表现完全相同，inner 为其设定宽度inner 随父元素变化此时三个属性表现完全相同。 inner 为其最小宽度，即：若 min-width 为固定值，则 inner 宽度为该值；否则，inner 宽度为 0inner 为可换行文本

min-content inner 为文本最小宽度（尽可能换行）max-content inner 为文本最大宽度（完全不换行）fit-content 在不超出 outer 的情况下，inner 尽可能宽。而如果 inner 为文本最小宽度时也超出了 outer，那 inner 就是文本最小宽度。更明确的表述如下：

if (文本最大宽度 + container < outer) { inner = 文本最大宽度} else if (文本最小宽度 + container > outer) { inner = 文本最小宽度} else { inner = outer - container}fill-availableouter 为固定宽度 container 贴合 outer 内部，inner 可能超出 container否则，inner 和 container 的表现与 max-content 相同（此时 fit-content 的表现也与 max-content 相同）

本文链接地址:https://www.jiuchutong.com/zhishi/304574.html 转载请保留说明！

上一篇：帝国cms怎么制作栏目(帝国cms怎么用)

下一篇：python中Array和DataFrame如何相互转换(python,array)