设计场景
- 如果我们不给元素指定固定的高度（height），它会根据其内容的高度自适应。我们希望宽度（width）也具有类似的行为
应用场景
我们用一幅图来展示实际的应用场景：
perfect.png
分析：
- 宽度由 内部因素 来决定，而不是由 外部因素 来决定的
- 水平居中
老式解决方案
- 代码结构
<p>文本</p>
<figure>
<img src="" alt="" width="" height="" />
<figcaption>标题/描述</figcaption>
</figure>
<p>文本</P>
- 为了得到正确的宽度，我们给 figure 元素浮动，但却引发了新的问题，整个布局模式改变了
float.png
- 对figure元素应用 display: inline-block 让它根据内容来决定自身的尺寸，这样虽然可以达到正确的宽度，但在水平居中上却让我们实现起来有点繁琐：我们需要对父元素应用 text-align: cener 属性，然后对不需要居中的子元素都设置 text-align: left 属性
inline-block.png
新式解决方案
figure {
max-width: 502px;
max-width: min-content;
margin: 20px auto;
}
figure > img {
max-width: inherit;
}
说明：
- min-content 属性，它获取的是这个容器内部最大的不可断行元素的宽度（最宽的单词、图片或具有固定宽度的元素），在这里起到了很重要的作用
- 为浏览器的兼容做了一个回退样式
《CSS SECRETS》
