CSS3 max/min-content及fit-content等width值理解

1. CSS2.1的尺寸體系

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

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

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

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

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

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

例如下面：

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

2. 理解width:fill-available

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

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

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

3. 理解width:max-content

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

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

4. 理解width:min-content

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

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

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

5. 理解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)，那為什么還要再弄個(gè)新東西呢？

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

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
禁止轉(zhuǎn)載，如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容