by zhangxinxu from https://www.zhangxinxu.com
本文地址：https://www.zhangxinxu.com/wordpress/?p=5392

一、CSS2.1的尺寸體系

在CSS2.1的世界中，常見的尺寸分為這幾類：
1. 充分利用可用空間
例如，一些div元素默認(rèn)寬度100%父元素，這種充分利用可用空間的行為就稱為“fill-available”。

2. 收縮與包裹
典型代表就是浮動，絕對定位以及inline-block，英文稱為“shrink-to-fit”，直譯為“收縮到合適”，這種直譯往往都是不準(zhǔn)確的，這種行為表現(xiàn)確實很難描述，有些只可意會不能言傳的感覺，而我自己一直以“包裹性”作為理解。在CSS3中有個專有的關(guān)鍵名稱，fit-content.

3. 收縮到最小
這個基本上就出現(xiàn)在table-layout為auto的表格中，想必有經(jīng)驗的小伙伴一定見過下面這樣一柱擎天的盛況的吧！

表格一柱擎天截圖示意

大家空間都不夠的時候，文字能斷的就斷，中文是隨便斷的，英文單詞不能斷。于是乎，第一列被無情地每個字都斷掉，形成一柱擎天。這種行為稱之為“preferred minimum width”或者“minimum content width”。

也就是本文的重點角色之一min-content，換了一個更加規(guī)范好聽的名字了。實際上，大家也看到了，min-content這種尺寸特性，display:table-cell實際上就有，但是，由于沒有明確的名詞或概念，大家都不知道，都是稀里糊涂有此表現(xiàn)，究其根本就不清楚了。

4. 超出容器限制
上面1~3情況，除非有明確的width相關(guān)設(shè)置，否則尺寸都不會主動超過容器寬度的，但是，存在一些特殊情況，例如，連續(xù)的英文數(shù)字，好長好長；或者內(nèi)聯(lián)元素被設(shè)置了white-space:nowrap，則表現(xiàn)為一江春水向東流。

例如下面：

<pre style="padding: 10px; margin: 8px 0px; font-size: 13px; background: linear-gradient(45deg, aliceblue 25%, transparent 25%, transparent 75%, aliceblue 75%, aliceblue) 0px 0px / 4px 4px, linear-gradient(45deg, aliceblue 25%, transparent 25%, transparent 75%, aliceblue 75%, aliceblue) 2px 2px rgb(238, 238, 238); color: rgb(0, 0, 221); white-space: pre-wrap; word-break: break-all; font-family: "Lucida Console", Consolas, Monaco;">.box {
display: inline-block;
width: 100px; height: 20px;
padding: 10px;
background-color: #f0f3f9;
white-space: nowrap;
}</pre>

尺寸主動超過容器寬度，恰如一江春水向東流。

max-content的表現(xiàn)與之有些類似，具有收縮特性，同時最大內(nèi)容寬度。

// ——— 有必要來根低調(diào)的分隔線 ———-

好了，至此，大家會發(fā)現(xiàn)，fill-available, max-content, min-content, 以及fit-content確實在CSS2.1的時候，就有類似概念。

下面問題來了，既然CSS2.1這些特性都有了，那還要額外弄一些新值過來干嘛呢？豈不是白白增加學(xué)習(xí)成本??？

我認(rèn)為有3個好處：

1. 方便某些布局的實現(xiàn)；
2. 最重要的作用： 在原有的display水平不變的情況下?lián)碛性仄渌鹍isplay值才有的特性！
3. 讓整個CSS世界的size體系更加直觀和完善；

我們下面不妨一邊了解下各個width值的作用和表現(xiàn)，一邊驗證我上面所說的好處！

二、理解width:fill-available

width:fill-available比較好理解，比方說，我們在頁面中扔一個沒有其他樣式的<div>元素，則，此時，該<div>元素的width表現(xiàn)就是fill-available自動填滿剩余的空間。也就是我們平常所說的盒模型的margin,border,padding的尺寸填充。

出現(xiàn)fill-available關(guān)鍵字值的價值在于，我們可以讓元素的100%自動填充特性不僅僅在block水平元素上，其他元素，例如，我們一直認(rèn)為的包裹收縮的inline-block元素上：

<pre style="padding: 10px; margin: 8px 0px; font-size: 13px; background: linear-gradient(45deg, aliceblue 25%, transparent 25%, transparent 75%, aliceblue 75%, aliceblue) 0px 0px / 4px 4px, linear-gradient(45deg, aliceblue 25%, transparent 25%, transparent 75%, aliceblue 75%, aliceblue) 2px 2px rgb(238, 238, 238); color: rgb(0, 0, 221); white-space: pre-wrap; word-break: break-all; font-family: "Lucida Console", Consolas, Monaco;">div { display:inline-block; width:fill-available; }</pre>

此時，元素兼具了塊狀元素的自動填充特性以及內(nèi)聯(lián)元素的定位對齊等特性。于是，（例如）我們就可以直接使用line-height讓一個塊狀表現(xiàn)的元素垂直居中。

您可以狠狠地點擊這里：CSS3 width:fill-available下的垂直居中demo

塊狀元素尺寸表現(xiàn)內(nèi)聯(lián)元素垂直居中行為

完整關(guān)鍵CSS代碼如下：

.box {
    height: 200px; 
    /* 行高控制垂直居中 */
    line-height: 200px;
}
.fill-available {
    /* 元素內(nèi)聯(lián)，響應(yīng)行高和vertical-align控制 */
    display: inline-block;
    vertical-align: middle;
    
    /* 寬度如塊狀元素般表現(xiàn) */
    width: -webkit-fill-available;
    width: -moz-fill-available;
    width: -moz-available;    /* FireFox目前這個生效 */
    width: fill-available;
}

正如上面注釋所提到的，F(xiàn)ireFox瀏覽器下，目前(2016-05-20)不是標(biāo)準(zhǔn)的-moz-fill-available，而是-moz-available，估計過個幾個版本可能會調(diào)整過來。

三、理解width:max-content

max-content的行為表現(xiàn)可以這么理解，假設(shè)我們的容器有足夠的寬度，足夠的空間，此時，所占據(jù)的寬度是就是max-content所表示的尺寸。

不懂沒關(guān)系，我們看一個對比示例，保證立馬就知道！

您可以狠狠地點擊這里：CSS3 width:max-content對比測試demo

這是一個display:inline-block和width:max-content的對比demo，如果妹子下面的文字描述短，大家是看不出區(qū)別的。但是，如果文字內(nèi)容像demo所展示的這么長，嘻嘻嘻嘻~~

周星馳 笑

會發(fā)現(xiàn)，width:max-content表現(xiàn)得好像設(shè)置了white-space:nowrap一樣，文字一馬平川下去，元素的寬度也變成了這些文字一行顯示的寬度！為什么會這么表現(xiàn)呢？定義就是這樣的，對吧，我們對照下，首先，假設(shè)我們的容器有足夠的空間，你想呀，容器足夠空間，那下面的描述文字肯定一行顯示了，此時，上面的圖片和下面的文字那個內(nèi)容寬度大，自然是文字啦，所謂max-content就是值采用寬度大的那個內(nèi)容的寬度。

max-content的表現(xiàn)對比示意

四、理解width:min-content

min-content寬度表示的并不是內(nèi)部那個寬度小就是那個寬度，而是，采用內(nèi)部元素最小寬度值最大的那個元素的寬度作為最終容器的寬度。

首先，我們要明白這里的“最小寬度值”是什么意思。替換元素，例如圖片的最小寬度值就是圖片呈現(xiàn)的寬度，對于文本元素，如果全部是中文，則最小寬度值就是一個中文的寬度值；如果包含英文，因為默認(rèn)英文單詞不換行，所以，最小寬度可能就是里面最長的英文單詞的寬度。So，大家明白的說。

還沒完全弄懂沒關(guān)系，我們看一個對比例子，您可以狠狠地點擊這里：CSS3 width:min-content對比demo

同樣的是和display:inline-block做比較，display:inline-block雖然也具有收縮特性，但寬度隨最大長度長的那一個（同時不超過可用寬度）。而width:min-content的最終寬度是圖片和文字最小寬度值里面大的那一個。

在本例子中，圖片的寬度最小值是256像素，不能再縮了；而文字的最小寬度值是字符display:inline-所占據(jù)的寬度，因為inline-block后面的block可以換行，中文不用談，天生被換行的命，顯然display:inline-所占據(jù)的寬度要遠(yuǎn)遠(yuǎn)小于256像素，因此，最終我們元素的寬度就是256像素，肉眼看到的就是自適應(yīng)圖片寬度的一個效果。在CSS2.1的世界里，這種效果實際上是不好實現(xiàn)的，要借助單元格特性。

沒有圖片文字的最小寬度值

下圖為對比效果截圖：

min-content下的對比效果截圖

五、理解width:fit-content

width:fit-content也是應(yīng)該比較好理解的，“shrink-to-fit”表現(xiàn)，換句話說，和CSS2.1中的float, absolute, inline-block的尺寸收縮表現(xiàn)是一樣的。

OK，然后，有小伙伴會疑問，既然跟很多CSS聲明有一樣的表現(xiàn)，那為什么還要再弄個新東西呢？

就拿水平居中效果舉例，首先浮動肯定不行，因為只有左浮動和右浮動；絕對定位壓根不占據(jù)空間，普通流中根本無法應(yīng)用，而inline-block需要父級使用text-align:center，而本身可能還需要text-align:left略煩。

而width:fit-content可以沒有這些煩惱，因為，width:fit-content可以實現(xiàn)元素收縮效果的同時，保持原本的block水平狀態(tài)，于是，就可以直接使用margin:auto實現(xiàn)元素向內(nèi)自適應(yīng)同時的居中效果了。

您可以狠狠地點擊這里：CSS3 width:fit-content使用與margin auto下水平居中demo

結(jié)果，簡簡單單就居中了，也不要擔(dān)心其他元素會跟在后面一行顯示了：

收縮表現(xiàn)下margin:auto居中效果