温故而知新——CSS3小技巧：width:fit-content

应用场景

利用CSS3的 fit-content 属性可以轻松解决居中以及根据子元素内容的宽度进行宽度设置的背景自适应内容问题。（目前这个属性只支持Chrome和Firefox浏览器）

使用方法

1、背景自适应内容

添加width:fit-content 后，盒子背景宽度将随文字宽度而进行自适应。

2、居中

使用 div 包含 input 的方式，把背景设置在 div 上，在输入很长的内容时，自适应宽度后就难以同时实现水平居中。将外层 div 的 width 设置为 fit-content ，再将左右 margin 设置为 auto 。这种方式让元素保持 block 状态而不会脱离文档流，并且也不用设置父级元素的样式。

其他延伸

（有意者自行研究）

1、width:fill-available

自适应父元素宽度

2、width:max-content

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

3、width:min-content

宽度为最小宽度值中最大的值