設計場景
- 如果我們不給元素指定固定的高度（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》
