CSS3 width之fit-content及max/min-content

应用场景：

利用fit-content属性解决居中以及背景自适应内容问题。

问题背景：

最开始使用div包含input的方式，将背景设置在div上，后来发现输入过长文字时，要自适应宽度就很难水平居中。

解决方案：

参考
contenteditable所述，结合内部input替换成设置了contenteditable为true的span标签（不限于此标签），将外层div的width设置为fit-content，再将左右margin设置为auto。

这种方式让元素保持block状态而不会脱离文档流，并且也不用设置父级元素的样式。

延伸问题：

1、width:fill-available

让元素100%自动填充，即自适应父元素宽度。这样可以让display为inline-block的元素表现起来像块级元素，又能够给父元素设置相同的height和line-height，使其垂直居中，且宽度100%。

2、width:max-content

宽度为最长宽度的子元素的宽度。

3、width:min-content

宽度为最小宽度值中最大的值。例如图片的最小宽度值就是自身宽度，文字中，汉字的最小宽度值为一个汉字的宽度，英文的最小宽度是最长单词的宽度。假设一个设置了此属性的元素包含500px宽的图片，font-size为12px的中英文混合段落，其中最长的英文单词是“W3school”。“W3school”占据的宽度肯定大于一个汉字的宽度，但远小于500px，所以该元素宽度和图片一致，为500px。