前言
設(shè)計師可以分為如下兩類：
- 先做好設(shè)計诚隙，然后將內(nèi)容放入靜態(tài)框架中
- 優(yōu)秀的設(shè)計師充分考慮內(nèi)容的各個方面及其上下文，并創(chuàng)建適合于內(nèi)容的設(shè)計
HTML原生就是響應(yīng)式的（HTML內(nèi)容在視口內(nèi)流式的分布）。隨著CSS的廣泛應(yīng)用吼肥，設(shè)計者創(chuàng)建了許多固定布局的“盒子”并把內(nèi)容強(qiáng)制的放在盒子之中，這有悖于HTML原生響應(yīng)的特性。
過去幾年出現(xiàn)了一場革命茸炒，包括自適應(yīng)設(shè)計，響應(yīng)式設(shè)計阵苇，移動優(yōu)先設(shè)計等壁公。所有這些思想最根本部分就是優(yōu)先考慮內(nèi)容。CSS3也因此定義和實(shí)現(xiàn)一些新的屬性绅项。其中就包括內(nèi)在和外在的寬度（intrinsic and extrinsic width values）紊册。
引入問題
我們以一個常規(guī)的 WEB 頁面設(shè)計問題（figure 元素內(nèi)的圖片）來引出問題并加以說明。
<figure>
<img src="o4iaq1g8nr.jpg" />
<figcaption>www.30ke.cn</figcaption>
<p>三十客 - 一個專注于前端學(xué)習(xí)和分享的網(wǎng)站快耿。</p>
</figure>
因?yàn)?code>figure是塊級標(biāo)記囊陡，所以元素一直延伸到至整個容器中。 在以內(nèi)容優(yōu)先的設(shè)計中润努，我們通常希望容器 (本例中為 figure元素) 盡可能小关斜。 到目前為止，有幾種方法可以實(shí)現(xiàn)铺浇。
figure {
float: left;
}
通過設(shè)置浮動痢畜，可以實(shí)現(xiàn) figure 元素折疊。但是如果 figure 中的 p （段落）元素寬于圖片寬度，則figure元素會收縮至最寬的子元素丁稀，而不是圖片的寬度吼拥。
使用display: inline-block 或 table-cell 同樣有上述問題。
figure {
width: 500px;
}
將 figure 元素寫死一個寬度线衫，但這使得元素固定并失去響應(yīng)特性凿可。
用 min-width 來幫忙
我們最終就是要找到最優(yōu)的圖片容器的寬度以最達(dá)到最好的適應(yīng)內(nèi)部圖片的目的。如果內(nèi)部的文本換行顯示也沒關(guān)系授账。
我們可以通過 min-content 來達(dá)到目的枯跑。盡管該值 2006 年就出現(xiàn)了，但還處在實(shí)驗(yàn)階段白热，因此需要添加不同瀏覽器前綴敛助。
figure {
border: 2px solid black;
background: #cae9b8;
margin: 0;
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
上述代碼，很好的解決了上述問題屋确。而且 margin 和 padding 在圖片容器內(nèi)部仍然有效纳击。
min-content 是內(nèi)在和外在的寬高系列值中的一個，其它還包括 max-content 攻臀， fit-content等焕数。這些值和 flexbox ，grid 和其它布局系統(tǒng)刨啸，使得WEB設(shè)計更優(yōu)秀更靈活堡赔。
min-content 的支持性很好，所有現(xiàn)代主流瀏覽器都支持該值呜投，但是 Internet Explorer and Opera Mini 并不支持加匈。
因此我們借助 max-widht 實(shí)現(xiàn)了回退的方案。
figure {
max-width: 500px;
max-width: min-content;
}
完整的帶回退的顯示方案見如下演示程序：
本文主要匯編自 Dudley Storey 的一篇博客仑荐，并加入了針對Internet Explorer and Opera Mini 的回退方案雕拼。但是因?yàn)楸救怂接邢蓿闹须y免存在描述不清粘招，代碼不完善等問題啥寇，還請大家多多予以批評指正！
參考文獻(xiàn)
CSS Intrinsic & Extrinsic Sizing Module Level 3
Design From the Inside Out With CSS Min-Content
play.csssecrets.io/
