前情提要

最近重温了一下MDN文档，果然温故而知新。

今天翻到CSS部分，然后发现width和height里，有几个属性值眼熟但是不多，准备深究一下。

尺寸体系

width和height用一句话概括就是：

日常开发中，经常会用到这两个属性的部分属性值。

今天着重试验几个不常用的属性值，然后找找使用场景。（我日常确实用到少，不然早就出一篇相关的文章了）

fill-available

这个看MDN的介绍，能看到人一头雾水。

但是根据这个词组翻译一下大致可以猜出来

实验中发现，当前元素是块级元素或者行内块元素才起作用。

元素表现

分别为元素的width和height设置了fill-available

.height-fill {
  display: inline-block;
  line-height: 24px;
  height: fill-available;
  height: -webkit-fill-available;
  height: -moz-fill-available;
  height: -moz-available;
  background: #0f6fb8;
}
.width-fill {
  display: inline-block;
  line-height: 24px;
  width: fill-available;
  width: -webkit-fill-available;
  width: -moz-fill-available;
  width: -moz-available;
  background: #0f6fb8;
}
.width-height-fill {
  display: inline-block;
  line-height: 24px;
  height: fill-available;
  height: -webkit-fill-available;
  height: -moz-fill-available;
  height: -moz-available;
  width: fill-available;
  width: -webkit-fill-available;
  width: -moz-fill-available;
  width: -moz-available;
  background: #0f6fb8;
}

设置之后，不难看出为元素设置了fill-available之后，元素表现的像块级元素一样自动撑满空间。

fit-content

根据这个词组翻译一下大致是：

元素表现

分别为元素的width和height设置了fit-content

.height-fill {
  background: #0f6fb8;
  height: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
}
.width-fill {
  background: #0f6fb8;
  width: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
}
.width-height-fill {
  background: #0f6fb8;
  height: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  width: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
}

设置之后，不难看出为元素设置了fit-content之后，宽度会自适应到子元素最长的宽度值。（高度设置没整明白，有空再查查资料吧）

min-content

不会以为这么简单就完事了吧，这个属性的表现是典型的"因人而异"。以宽度为例，下面是总结时刻：

• 有英文时，因为默认情况下英文单词是不换行的，这种情况下，最小宽度是最长的英文单词的宽度。
• 没有英文但是有图片时，最小宽度是图片呈现的宽度。
• 只有中文时，最小宽度是单个中文的宽度值。

.width-min {
  background: #0f6fb8;
  width: min-content;
  width: -webkit-min-content;
  width: -moz-min-content;
}

max-content

以宽度为例，设置该属性值之后，会适应子元素中最长的宽度。这个属性值没有min-content那么多分类区分，只挑子元素中最长的宽度。

未完待续

其实学完某个知识点之后，除了知道它是什么，我还比较关心怎么用它，实际开发中的应用场景硬猜是比较困难的，好在有大佬已经做了总结。

推荐张鑫旭大神的《理解CSS3 max/min-content及fit-content等width值》，总结的即全面又详细，通俗易懂。