目录：
一、普通样式效果 二、给title设置display 三、width 四、fit-content 五、理解width:max-content
字数：大约800字
话不多说，直接看效果图,下面图片是我们想要的效果
一、普通样式效果
<divclass="main">
<!-- 标题 -->
<divclass="title">
<imgsrc="./img/冰淇淋.png"alt="">
<span>冰淇淋</span>
</div>
<!-- 内容 -->
<divclass="content">
有研究人员却认为冰淇淋起源于中国。
早在1000多年前，封建王侯为了消暑，
让人在冬天把冰取来，贮存在地窖里，
到了夏天再拿出来享用。唐朝末期，
人们在生产火药时开采出大量硝石，
并且在一个偶然的机会发现硝石溶于
凉水的时候会吸收大量的热，甚至
可以让水结冰。从此人们不用储藏
冰块就可以在夏天制冰了。此时有
了专门在夏天卖冰的商人，他们把
糖加到冰里吸引顾客。到了宋代
市场上冷冻食品的花样多起来了。
商人还在里面加上水果或果汁。
元代的商人甚至在冰中加上果浆
和牛奶，这种冷冻食品被认为是
原始的冰淇淋。 [7]
</div>
</div>
.main{
width: 500px;
margin: 100px auto;
}
.title{
display: flex;
align-items: center;
background-color: orange;
}
img{
width: 40px;
height: 40px;
}
普通样式下，可以发现，标题部分，占领了第一行，背景颜色也是占满的。如果我们想要让标题自适应，背景颜色只为内容添加背景色，我们应该怎样做呢。
二、给title设置display
很多伙伴第一反应是，给title设置display: inline-block;或display: inline;但是他已经设置flex啦。就不能设置display: inline-block;或display: inline;啦。
解决办法是可以在父元素里面再一个子元素，让子元素把图标和内容包裹起来，在让子元素变为行内元素。但是这样的话没有根本上解决问题，因为父元素依然沾满了整行，而且html元素增多。不可取！
三、width
.main{
width: 500px;
margin: 100px auto;
}
.title{
display: flex;
align-items: center;
background-color: orange;
+ width: 100px;
}
img{
width: 40px;
height: 40px;
}
也有很多伙伴想到直接，设置width宽度，但是它不能写死，因为写死了，如果内容多了，那就这样了。当然可能有的需求是超出展示三个点，那就另说啦。
所以也不可取！
四、fit-content
同理，其它的只要是设置值的，都不满足我们想要标题自适应的需求。来看看fit-content。
.main{
width: 500px;
margin: 100px auto;
}
.title{
display: flex;
align-items: center;
background-color: orange;
+ width: fit-content;
}
img{
width: 40px;
height: 40px;
}
这个时候发现，我艹，🐮，这个可以自适应，首先，它既是块级元素，它又能自适应内容宽度。很好。我们再研究研究一下它。
介绍：
fit-content 行为类似于 fit-content(stretch)，实际上这意味着盒子会使用可用的空间，但永远不会超过 max-content。
这里说永远不会超过 max-content，那这个 max-content 是多大呢，
五、理解width:max-content
max-content的行为表现可以这么理解，假设我们的容器有足够的宽度，足够的空间，此时，所占据的宽度是就是max-content所表示的尺寸。
不懂没关系，我们看一个对比示例，保证立马就知道！
您可以底部超链接访问：CSS3 width:max-content对比测试demo
这是一个display:inline-block和width:max-content的对比demo，如果妹子下面的文字描述短，大家是看不出区别的。但是，如果文字内容像demo所展示的这么长，嘻嘻嘻嘻~~
会发现，width:max-content表现得好像设置了white-space:nowrap一样，文字一马平川下去，元素的宽度也变成了这些文字一行显示的宽度！为什么会这么表现呢？定义就是这样的，对吧，我们对照下，首先，假设我们的容器有足够的空间，你想呀，容器足够空间，那下面的描述文字肯定一行显示了，此时，上面的图片和下面的文字那个内容宽度大，自然是文字啦，所谓max-content就是值采用宽度大的那个内容的宽度。
请注意，fit-content是CSS3的新特性，不一定在所有的浏览器中都得到支持。在某些较旧的浏览器中，可能需要使用浏览器厂商的特定前缀或备用方案来实现相同的效果。另外，fit-content也不适用于所有元素，具体取决于元素的布局和其他样式调整。
CSS3 width:max-content对比测试demo：https://www.zhangxinxu.com/study/201605/width-max-content.html
