前情提要
为了丰富自己是知识体系（为了日更薅羊毛），我最近频繁翻阅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那么多分类区分，只挑子元素中最长的宽度。
代码表现
未完待续
其实学完某个知识点之后，除了知道它是什么，我还比较关心怎么用它，实际开发中的应用场景硬猜是比较困难的，好在有大佬已经做了总结。
最后
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
