前情提要

为了丰富自己是知识体系（为了日更薅羊毛），我最近频繁翻阅MDN的文档，果然MDN文档常看常新。

今天翻到CSS部分，然后发现width和height里，有几个属性值眼熟但是不多，值得好好研究一下（今天文章的内容有了）。

这篇就叫《重新认识CSS的尺寸体系》吧。

尺寸体系

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

它们是css中用来控制元素高度和宽度的尺寸属性。

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

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

fill-available

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

根据文字方向，使用 fill-available 作为行大小或者块大小。

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

撑满可用空间

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

元素表现

分别为元素的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值》，总结的即全面又详细，通俗易懂。

我喜欢创作，每一幅作品都是我将想象用一只叫做“代码”的画笔，绘制而成。

当我寻找新的技术的时候，不是创意枯竭，而是我需要新的色彩。

而这个循序渐进的学习过程，虽然缓慢，但是积少成多、聚沙成塔。