宽度自适应属性值fill-available、fit-content、max-content、min-content

CSS3中，对width新增了一些属性值，用来进行自适应。(IE不支持)
1、width:fill-available;
合理分配剩余有效空间：

效果：

fill-available可以让元素宽度进行自动填充，改元素不仅限于块状元素，行内元素亦是如此；此外，fill-available不同于width=100%,它会影响padding的解析，也就是加了padding后元素整体的宽高不会变化,不再演示；
2、width:fit-content；
根据子元素内容的宽度进行宽度的设置；

效果：

在父元素width是fit-content的情况下，我们可以直接给父元素添加margin:0 auto;进行居中显示，很是方便（不再演示）；
3、width:max-content;
根据最大子元素的宽度来设置容器宽度；

效果：

4、width:min-content;
根据最小元素的宽度来设置容器宽度；

效果：

注：span为行内元素无法宽度，min-content会根据h2的宽度来设置父元素

上述4个自适应的关键字也可以用到height属性中，但不是很常用，不再一一演示；