css width 属性 fit-content min-content max-content 区别
display：inline-block 当文字内容超过最大限制宽度时会换行
width：max-content 当文字内容超过最大限制宽度时不换行
display:inline-block具有收缩特性，但是，当（例如这里的）描述文字超过一行显示的时候，其会这行，不会让自身的宽度超过父级容器的可用空间的，但是，width:max-content就不是酱样子哦咯！表现得好像设置了white-space:nowrap一样，
min-content宽度表示的并不是内部那个宽度小就是那个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。
首先，我们要明白这里的“最小宽度值”是什么意思。替换元素，例如图片的最小宽度值就是图片呈现的宽度，对于文本元素，如果全部是中文，则最小宽度值就是一个中文的宽度值；如果包含英文，因为默认英文单词不换行，所以，最小宽度可能就是里面最长的英文单词的宽度。
isplay:inline-block具有收缩特性，但这里宽度随文字。而width:min-content随图片。
width:fit-content也是应该比较好理解的，“shrink-to-fit”表现，换句话说，和CSS2.1中的float, absolute, inline-block的尺寸收缩表现是一样的。
display:inline-block居中要靠父元素，而width:fit-content直接margin:auto.
div { display:inline-block; width:fill-available; }fill-available的意义——自动填满剩余的空间
就是有个div没有任何样式的时候，浏览器是按照自动填充的样式呈现的，就是100%width的样式填充的。按照盒子模式，不仅元素在block中可以呈现自动填满空间的样式，在inline-block上也是可以这样呈现的（包裹收缩的inline-block元素上，这里说的inline-block是具有收缩特性）。
