css的height，min-height,max-height,min-width.....

参考地址:
1.http://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/
2. https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-height
3. http://www.divcss5.com/rumen/r422.shtml

CSS属性 min-height 通常用来设置一个元素的最小高度。这个属性（min-height）不允许一个元素的高度（height）小于这个元素指定的最小高度（min-height）。

/* <length> value */
min-height: 3.5em;

/* <percentage> value */
min-height: 10%;

/* Keyword values */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;

/* Global values */
min-height: inherit;
min-height: initial;
min-height: unset;

理解width:fill-available

width:fill-available比较好理解，比方说，我们在页面中扔一个没有其他样式的

元素，则，此时，该

元素的width表现就是fill-available自动填满剩余的空间。也就是我们平常所说的盒模型的margin,border,padding的尺寸填充。

出现fill-available关键字值的价值在于，我们可以让元素的100%自动填充特性不仅仅在block水平元素上，其他元素，例如，我们一直认为的包裹收缩的inline-block元素上：

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

此时，元素兼具了块状元素的自动填充特性以及内联元素的定位对齐等特性。于是，（例如）我们就可以直接使用line-height让一个块状表现的元素垂直居中。

理解width:max-content

max-content的行为表现可以这么理解，假设我们的容器有足够的宽度，足够的空间，此时，所占据的宽度是就是max-content所表示的尺寸。

width:max-content表现得好像设置了white-space:nowrap一样，文字一马平川下去，元素的宽度也变成了这些文字一行显示的宽度！，首先，假设我们的容器有足够的空间，你想呀，容器足够空间，那下面的描述文字肯定一行显示了，所谓max-content就是值采用宽度大的那个内容的宽度。

理解width:min-content

min-content宽度表示的并不是内部那个宽度小就是那个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。

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

同样的是和display:inline-block做比较，display:inline-block虽然也具有收缩特性，但宽度随最大长度长的那一个（同时不超过可用宽度）。而width:min-content的最终宽度是图片和文字最小宽度值里面大的那一个。

理解width:fit-content

width:fit-content也是应该比较好理解的，“shrink-to-fit”表现，换句话说，和CSS2.1中的float, absolute, inline-block的尺寸收缩表现是一样的。

OK，然后，有小伙伴会疑问，既然跟很多CSS声明有一样的表现，那为什么还要再弄个新东西呢？

就拿水平居中效果举例，首先浮动肯定不行，因为只有左浮动和右浮动；绝对定位压根不占据空间，普通流中根本无法应用，而inline-block需要父级使用text-align:center，而本身可能还需要text-align:left略烦。

而width:fit-content可以没有这些烦恼，因为，width:fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。

最后

CSS中的元素尺寸分为两类，一类叫做“内部尺寸”，英文写作”Intrinsic Sizing”，尺寸由内部元素决定；还有一类叫做“外部尺寸”，英文写作”Extrinsic Sizing”，宽度由外部元素决定。

考考大家：
fill-available, max-content, min-content, fit-content这4个关键字，哪个是“内部尺寸”，哪个是“外部尺寸”呢？