CSS3 ,fill-available、max-content、min-content、fit-content,自适应

自适应：

撑满空闲空间与收缩到内容尺寸。

CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。

除此之外 ，还新增了更细粒度的'min-content'和'max-content'。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字

　　[注意]IE浏览器不支持，webkit内核浏览器需添加-webkit-前缀

 

fill-available

　　width:fill-available表示撑满可用空间

　　举例来说，页面中一个<div>元素，该<div>元素的width表现就是fill-available自动填满剩余的空间

　　出现fill-available关键字值的价值在于，可以让元素的100%自动填充特性不仅仅在block水平元素上，也可以应用在其他元素

 

fit-content

　　width:fit-content表示将元素宽度收缩为内容宽度

 

min-content

　　width:min-content表示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度

 

max-content

　　width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行