学习理解 CSS3 max/min-content 和 fit-content

我想很多朋友还没有看过。不知道你是否也有和我一样的感受。我去洗手间坐了一会儿，当我回到办公室时，我看到了一个我以前从未见过的新功能。

只有像我这样学习HTML和CSS的人有点困惑。我认为了解CSS3、HTML5、ES6/ES7、React、Angular、bootstrap、postcss、node的朋友每天应该睡3-4个小时。大约一个小时，玩的很开心！

一切事物的存在都有其原因。那么为什么我们要在定义中的公共属性width中添加一些关键字呢？

你觉得我应该先谈谈每个角色的价值观意味着什么，还是应该先谈谈为什么需要这些新价值观？

经过深思熟虑，我决定…先说合同的事吧…

总的来说，手机版可以愉快的使用。

根据我的测试，还是需要特殊的前缀，例如：

.min-content {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;    
}

好吧，我们开始深入聊吧。

尽管名称为，但有完整的，最大内容，最小内容，最小内容适合内容全新那张脸，但是，其实在CSS2.1中，也有类似的尺寸概念...

2. CSS2.1尺寸系统

在CSS2.1的世界里，常见的尺寸都分为这一类。 ：
1。充分利用可用空间
例如，元素 div 的宽度为其父元素的 100%。此行为称为“填充可用”。

2。倾斜式
常见的代表有浮动式、全装式和inline-block，英文称为“shrink-to-fit”，直译为“shrink to fit”。这种直译通常是不准确的。很难描述这种行为。有些感受只能理解，却无法用言语表达。不过，我一直都理解“包围”这个东西。 CSS3中有一个专有的关键字名称，fit-content.

3。最小化
这个一般出现在table-layout到auto的表格中，有经验的朋友一定见过像下面这样的大事件！

当我们没有足够的空间时，如果可以的话我们可以删掉单词。中文很容易被破解，但英文却不能被破解。结果，第一栏的所有文字都被无情地折断，成为了一根擎天的柱子。此行为称为“最小宽度”或“最小内容宽度”。

是这篇文章min-content中的重要人物之一，已经改成了更规范、更好听的名字。其实大家也可以看到，还有min-content和display:table-cell的尺寸属性。然而，因为没有明确的言语或概念，所以我不知道一切，这一切都是立即发生的，而且根本不清楚。

4。超出集装箱限制
在上述1~3种情况下，如果没有相关的宽度设置，则尺寸不会超出集装箱宽度。但也有特殊情况，比如 ，连续英文数字，​​很长；或者如果内联元素设置为white-space:nowrap，它看起来就像一条向东流的源头河流。

例：

.box {
    display: inline-block;
    width: 100px; height: 20px; 
    padding: 10px;
    background-color: #f0f3f9;
    white-space: nowrap;
}

体积超过了容器的宽度，就像一条向东流的河流。

max-content 的行为类似，但具有减少的属性和最大内容宽度。

// ——— 需要有一个底部分隔线————

好吧，现在你会看到填充，♸ -内容

接下来的问题是，既然CSS2.1已经有了这些特性，为什么我们还需要获取额外的新值呢？那不是总要涨学费吗？

我认为有三个好处：

1. 让一些方案更容易实施；
2. 最重要的功能：具有元素显示的其他值的特点，同时保持原有的显示级别不变。 ！
3. 使整个CSS世界中的尺寸系统更加直观和全面；

让我们了解每个值宽度的作用和表现，同时检查我上面提到的好处！

3。理解 width:fill-with

width:full-with 很容易理解。例如，如果我们在页面上不使用任何其他方法抛出元素

，则现在元素

的宽度为♻-可用自动填充剩余空间。这通常称为 边距、边框、填充尺寸。 fill-available值的

外观的价值在于我们不仅可以在块上对元素进行100%自动填充，还可以对其他元素进行100%自动填充。例如，我们在元素 inline-block 中，本应始终包裹和收缩：

div { display:inline-block; width:fill-available; }

目前，该元素既具有块元素的自动填充属性，又具有安装对齐功能。行内元素的特性。因此，（例如）我们可以直接使用linewidth来聚焦同一垂直块的元素。

可以点击这里：CSS3下的垂直演示 width:fill-available

完整的CSS关键代码如下：

.box {
    height: 200px; 
    /* 行高控制垂直居中 */
    line-height: 200px;
}
.fill-available {
    /* 元素内联，响应行高和vertical-align控制 */
    display: inline-block;
    vertical-align: middle;
    
    /* 宽度如块状元素般表现 */
    width: -webkit-fill-available;
    width: -moz-fill-available;
    width: -moz-available;    /* FireFox目前这个生效 */
    width: fill-available;
}

如上面评论-评论中提到的，在FireFox浏览器下，目前（2016-05 ) -20) 不是标准的 -moz-fill-available，而是 -moz-available。估计会在几个版本中修正。

4。了解宽度的工作原理：max-content

max-content。假设我们的容器有足够的宽度和空间。目前，宽度为 max-content 表示的尺寸。

不懂也没关系。看看对比例子你就知道了！

可以点击这里：CSS3 width:max-content 演示对比

这是 display:inline-block 和 content-width: ，如果女孩，不是每个人都能看出差异。不过，如果文本内容如 demo 中所示很长，呵呵呵呵~~

会看到 width:max-content 的行为就像设置了 white-space :nowrap 一样，文本是平滑的。元素的宽度也变成了一行这些单词的宽度！为什么要这样做？这就是定义，不是吗？比较一下。首先，确保我们的容器有足够的空间。如果您认为容器有足够的空间，则以下描述性文本必须显示在一行上。目前，上图和下图如果文章的内容有更多的宽度，那么它就是一篇自然的文章。所谓max-content，就是指content值有更大的宽度。

5。查找width:min-content

min-contentWidth并不代表宽度最小的内部元素的宽度。相反，内部元素的宽度最小的元素的宽度被用作最终宽度。容器的宽度。

首先我们要明白这里的“最低价”是什么意思。替换元素，例如图片的宽度就是图片的宽度。对于文本元素，如果全部是中文，则最小宽度值为中文宽度值；如果有英文单词，因为默认英文单词是不换行的，所以最小的宽度可能是里面英文单词的最长宽度。那么，让我们解释一下。

如果你还不明白也没关系。让我们看一个比较示例。可以点击这里：CSS3 width:min-content 对比演示

同display:inline-block作为对比，display:inline-block♸有一个shrinkage属性，宽度为比最大长度长（如果不超过可用宽度）。最终宽度:min-content大于图片宽度和文字宽度。

本例中，最小图像宽度为256像素，无法进一步缩小；而文本的最小宽度就是字符display:inline-的宽度，因为inline中的block

block可以放在行后面。不用说，中国人就是被设计成内衬的。当然，display:inline-的宽度小于256像素，所以我们元素的最终宽度是256像素，而你肉眼看到的就是自适应宽度的结果图形。 。在CSS2.1的世界里，这种效果很难实现，需要借助单元格属性。

下图是对比结果截图：


6.理解width:fit-content

width:fit-content应该比较容易理解。适应”性能，即减小 float、absolute、、abs 的尺寸olute、♸ ♸和CSS♻一样

好吧，有些朋友可能会想，既然很多CSS声明都做同样的事情，为什么我们需要创建一些东西-What's new？

取中间的横线以效果为例，首先浮动不起作用，因为只有左右浮动；绝对放置不占用任何空间，无法应用于正常流程，而inline-block 需要父级使用text-align:center，这可能需要文本align:left