1. CSS2.1的尺寸體系

在CSS2.1的世界中，常見的尺寸分為這幾類：

2.1 充分利用可用空間。例如，一些div元素默認寬度100%父元素，這種充分利用可用空間的行為就稱為“fill-available”。

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

2.3 收縮到最小。這個基本上就出現在table-layout為auto的表格中，想必有經驗的小伙伴一定見過下面這樣一柱擎天的盛況的吧！

大家空間都不夠的時候，文字能斷的就斷，中文是隨便斷的，英文單詞不能斷。于是乎，第一列被無情地每個字都斷掉，形成一柱擎天。這種行為稱之為“preferred minimum width”或者“minimum content width”，也就是本文的重點角色之一min-content，換了一個更加規范好聽的名字了。

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

例如下面：

max-content的表現與之有些類似，具有收縮特性，同時最大內容寬度

2. 理解width:fill-available

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

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

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

3. 理解width:max-content

max-content的行為表現可以這么理解，假設我們的容器有足夠的寬度，足夠的空間，此時，所占據的最大寬度是就是max-content所表示的尺寸。

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

4. 理解width:min-content

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

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

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

5. 理解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 max/min-content及fit-content等width值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。