CSS样式结构
最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多。
比如一个图片为主列表，对象里图片大小不定时候，为了不想让他太小不统一这个时候我们可以使用css最小宽度样式。再如，一个盒子里有文章有图片混排的时候，有时图片宽度不能确定，这个时候如果html img图片宽度超出了盒子宽度，可能图片就会撑破div盒子造成图片混乱。
我们设置2样式，分别设置最大与最小宽度。设置两个div盒子，一个是没有设置样式的，一个设置了最大或者最小宽度，来进行对比
分析：由于设置了最大宽度，但是原图片宽度大于最大宽度，因而产生了自动缩放效果
分析：由于设置了最小宽度，则被迫放大了一些
min-height就是你的层的最小高度，如果该层中的元素内容高度小于这个高度，就将层显示为min-height的值，超过的话，就撑破层，使层的高度与元素内容高度一样。max-height就是和这个相反了，不超出的话，层高度就和层中内容元素高度一样，否则就截断内容，显示max-height的高度。
line-height是行高，就是针对文本的，即一行文字的行高，是以该标签中文字大小font-size做比较的，例如line-height=200%；就是让行高是文字大小的两倍。
1. CSS2.1的尺寸体系
在CSS2.1的世界中，常见的尺寸分为这几类：
2.1 充分利用可用空间。例如，一些div元素默认宽度100%父元素，这种充分利用可用空间的行为就称为“fill-available”。
2.2 收缩与包裹。典型代表就是浮动，绝对定位以及inline-block，英文称为“shrink-to-fit”，直译为“收缩到合适”，这种直译往往都是不准确的，这种行为表现确实很难描述，有些只可意会不能言传的感觉，而我自己一直以“包裹性”作为理解。在CSS3中有个专有的关键名称，fit-content
2.3 收缩到最小。这个基本上就出现在table-layout为auto的表格中，想必有经验的小伙伴一定见过下面这样一柱擎天的盛况的吧！
大家空间都不够的时候，文字能断的就断，中文是随便断的，英文单词不能断。于是乎，第一列被无情地每个字都断掉，形成一柱擎天。这种行为称之为“preferred minimum width”或者“minimum content width”，也就是本文的重点角色之一min-content，换了一个更加规范好听的名字了。
2.4 超出容器限制 上面1~3情况，除非有明确的width相关设置，否则尺寸都不会主动超过容器宽度的，但是，存在一些特殊情况，例如，连续的英文数字，好长好长；或者内联元素被设置了white-space:nowrap，则表现为一江春水向东流
例如下面：
max-content的表现与之有些类似，具有收缩特性，同时最大内容宽度
2. 理解width:fill-available
width:fill-available比较好理解，比方说，我们在页面中扔一个没有其他样式的<div>元素，则，此时，该<div>元素的width表现就是fill-available，自动填满剩余的空间。也就是我们平常所说的盒模型的margin,border,padding的尺寸填充。
出现fill-available关键字值的价值在于，我们可以让元素的100%自动填充特性不仅仅在block水平元素上，其他元素，例如，我们一直认为的包裹收缩的inline-block元素上：
此时，元素兼具了块状元素的自动填充特性以及内联元素的定位对齐等特性(vertical-align/height/line-height)。于是，（例如）我们就可以直接使用line-height让一个块状表现的元素垂直居中
3. 理解width:max-content
max-content的行为表现可以这么理解，假设我们的容器有足够的宽度，足够的空间，此时，所占据的最大宽度是就是max-content所表示的尺寸。
会发现，width:max-content表现得好像设置了white-space:nowrap一样，文字一马平川下去，元素的宽度也变成了这些文字一行显示的宽度！为什么会这么表现呢？定义就是这样的，对吧，我们对照下， 首先，假设我们的容器有足够的空间，你想呀，容器足够空间，那下面的描述文字肯定会从左到右排列一行显示了，此时，上面的图片和下面的文字哪个内容宽度大？，自然是文字啦，所谓max-content就是width值采用宽度大的那个内容的宽度，也就是这里的文字的长度了
4. 理解width:min-content
min-content宽度表示的并不是内部哪个宽度小就是哪个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。
首先，我们要明白这里的“最小宽度值”是什么意思。对于替换元素，例如图片的最小宽度值就是图片呈现的宽度，对于文本元素，如果全部是中文，则最小宽度值就是一个中文的宽度值；如果包含英文，因为默认英文单词不换行，所以，最小宽度可能就是里面最长的英文单词的宽度。So，大家明白的说
同样的是和display:inline-block做比较，display:inline-block虽然也具有收缩特性，但宽度随最大长度长的那一个（同时不超过可用宽度）。而width:min-content的最终宽度是图片和文字最小宽度值里面较大的那一个
5. 理解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实现元素向内自适应同时的居中效果了。
