一、為何要蹦出這些新玩意？
在CSS3的世界裡，width屬性又多了幾個關鍵字成員，fill-available, max-content, min-content, 以及fit-content。
想必很多小夥伴都沒見過。不知大家有沒有跟我一樣的感覺，去廁所蹲了個大號，再回到辦公室就會遇到之前沒見過的前端新特性。
像我這種只學HTML和CSS都有些應接不暇，我想，那些CSS3, HTML5, ES6/ES7, React, Angular, bootstrap, postcss, node都會的小夥伴，應該每天都只睡3-4個小時吧，好厲害！
凡是存在就有其道理。那為何規範裡要給稀鬆常見的width屬性加幾個關鍵字呢？
大家說我是先講各個屬性值表示的含義，還是先講講為什麼要弄這些新屬性值呢？
一番深思熟慮，我決定……先講講相容性……
基本上，移動端已經可以愉快地使用了。
據我測試，目前還離不開私有字首，例如：
|
1 2 3 4 5 |
.min-content { width: -webkit-min-content; width: -moz-min-content; width: min-content; } |
好了，要開始往深的地方講了。
雖然，作為名詞fill-available, max-content, min-content, 以及fit-content都是新鮮面孔，但是，實際上，在CSS2.1的時候，就有類似的尺寸概念……
二、CSS2.1的尺寸體系
在CSS2.1的世界中，常見的尺寸分為這幾類：
1. 充分利用可用空間
例如，一些div元素預設寬度100%父元素，這種充分利用可用空間的行為就稱為“fill-available”。
2. 收縮與包裹
典型代表就是浮動，絕對定位以及inline-block，英文稱為“shrink-to-fit”，直譯為“收縮到合適”，這種直譯往往都是不準確的，這種行為表現確實很難描述，有些只可意會不能言傳的感覺，而我自己一直以“包裹性”作為理解。在CSS3中有個專有的關鍵名稱，fit-content.
3. 收縮到最小
這個基本上就出現在table-layout為auto的表格中，想必有經驗的小夥伴一定見過下面這樣一柱擎天的盛況的吧！
大家空間都不夠的時候，文字能斷的就斷，中文是隨便斷的，英文單詞不能斷。於是乎，第一列被無情地每個字都斷掉，形成一柱擎天。這種行為稱之為“preferred minimum width”或者“minimum content width”。
也就是本文的重點角色之一min-content，換了一個更加規範好聽的名字了。實際上，大家也看到了，min-content這種尺寸特性，display:table-cell實際上就有，但是，由於沒有明確的名詞或概念，大家都不知道，都是稀裡糊塗有此表現，究其根本就不清楚了。
4. 超出容器限制
上面1~3情況，除非有明確的width相關設定，否則尺寸都不會主動超過容器寬度的，但是，存在一些特殊情況，例如，連續的英文數字，好長好長；或者內聯元素被設定了white-space:nowrap，則表現為一江春水向東流。
例如下面：
|
1 2 3 4 5 6 7 |
.box { display: inline-block; width: 100px; height: 20px; padding: 10px; background-color: #f0f3f9; white-space: nowrap; } |
尺寸主動超過容器寬度，恰如一江春水向東流。
max-content的表現與之有些類似，具有收縮特性，同時最大內容寬度。
// ——— 有必要來根低調的分隔線 ———-
好了，至此，大家會發現，fill-available, max-content, min-content, 以及fit-content確實在CSS2.1的時候，就有類似概念。
下面問題來了，既然CSS2.1這些特性都有了，那還要額外弄一些新值過來幹嘛呢？豈不是白白增加學習成本啊？
我認為有3個好處：
- 方便某些佈局的實現；
- 最重要的作用： 在原有的display水平不變的情況下擁有元素其他display值才有的特性！
- 讓整個CSS世界的size體系更加直觀和完善；
我們下面不妨一邊瞭解下各個width值的作用和表現，一邊驗證我上面所說的好處！
三、理解width:fill-available
width:fill-available比較好理解，比方說，我們在頁面中扔一個沒有其他樣式的<div>元素，則，此時，該<div>元素的width表現就是fill-available自動填滿剩餘的空間。也就是我們平常所說的盒模型的margin,border,padding的尺寸填充。
出現fill-available關鍵字值的價值在於，我們可以讓元素的100%自動填充特性不僅僅在block水平元素上，其他元素，例如，我們一直認為的包裹收縮的inline-block元素上：
|
1 |
div { display:inline-block; width:fill-available; } |
此時，元素兼具了塊狀元素的自動填充特性以及內聯元素的定位對齊等特性。於是，（例如）我們就可以直接使用line-height讓一個塊狀表現的元素垂直居中。
您可以狠狠地點選這裡：CSS3 width:fill-available下的垂直居中demo
完整關鍵CSS程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.box { height: 200px; /* 行高控制垂直居中 */ line-height: 200px; } .fill-available { /* 元素內聯，響應行高和vertical-align控制 */ display: inline-block; vertical-align: middle; /* 寬度如塊狀元素般表現 */ width: -webkit-fill-available; width: -moz-fill-available; width: -moz-available; /* FireFox目前這個生效 */ width: fill-available; } |
正如上面註釋所提到的，FireFox瀏覽器下，目前(2016-05-20)不是標準的-moz-fill-available，而是-moz-available，估計過個幾個版本可能會調整過來。
四、理解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就是值採用寬度大的那個內容的寬度。
五、理解width:min-content
min-content寬度表示的並不是內部那個寬度小就是那個寬度，而是，採用內部元素最小寬度值最大的那個元素的寬度作為最終容器的寬度。
首先，我們要明白這裡的“最小寬度值”是什麼意思。替換元素，例如圖片的最小寬度值就是圖片呈現的寬度，對於文字元素，如果全部是中文，則最小寬度值就是一箇中文的寬度值；如果包含英文，因為預設英文單詞不換行，所以，最小寬度可能就是裡面最長的英文單詞的寬度。So，大家明白的說。
還沒完全弄懂沒關係，我們看一個對比例子，您可以狠狠地點選這裡：CSS3 width:min-content對比demo
同樣的是和display:inline-block做比較，display:inline-block雖然也具有收縮特性，但寬度隨最大長度長的那一個（同時不超過可用寬度）。而width:min-content的最終寬度是圖片和文字最小寬度值裡面大的那一個。
在本例子中，圖片的寬度最小值是256畫素，不能再縮了；而文字的最小寬度值是字元display:inline-所佔據的寬度，因為inline-block後面的block可以換行，中文不用談，天生被換行的命，顯然display:inline-所佔據的寬度要遠遠小於256畫素，因此，最終我們元素的寬度就是256畫素，肉眼看到的就是自適應圖片寬度的一個效果。在CSS2.1的世界裡，這種效果實際上是不好實現的，要藉助單元格特性。
下圖為對比效果截圖：
六、理解width:fit-content
width:fit-content也是應該比較好理解的，“shrink-to-fit”表現，換句話說，和CSS2.1中的float, absolute, inline-block的尺寸收縮表現是一樣的。
OK，然後，有小夥伴會疑問，既然跟很多CSS宣告有一樣的表現，那為什麼還要再弄個新東西呢？
就拿水平居中效果舉例，首先浮動肯定不行，因為只有左浮動和右浮動；絕對定位壓根不佔據空間，普通流中根本無法應用，而inline-block需要父級使用text-align:center，而本身可能還需要text-align:left略煩。
而width:fit-content可以沒有這些煩惱，因為，width:fit-content可以實現元素收縮效果的同時，保持原本的block水平狀態，於是，就可以直接使用margin:auto實現元素向內自適應同時的居中效果了。
您可以狠狠地點選這裡：CSS3 width:fit-content使用與margin auto下水平居中demo
結果，簡簡單單就居中了，也不要擔心其他元素會跟在後面一行顯示了：
七、結束語
CSS中的元素尺寸分為兩類，一類叫做“內部尺寸”，英文寫作”Intrinsic Sizing”，尺寸由內部元素決定；還有一類叫做“外部尺寸”，英文寫作”Extrinsic Sizing”，寬度由外部元素決定。
考考大家：
fill-available, max-content, min-content, fit-content這4個關鍵字，哪個是“內部尺寸”，哪個是“外部尺寸”呢？
看本文之前難度90，看完本文之後，難度10. 如果你覺得還是很難，建議再看一遍，然後不斷遞迴。 
好了，其他廢話就不多說了，感謝閱讀，歡迎交流！
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。