在css3中新增了width的屬性值：max-content;min-content和fit-content、fill-availablea，用來(lái)實(shí)現(xiàn)以內(nèi)容為主的尺寸計(jì)算方式。

創(chuàng)新互聯(lián)建站專注于企業(yè)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站重做改版、合山網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為合山等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

分別介紹一下這三個(gè)屬性的意義：

1.fill-available的意義——自動(dòng)填滿剩余的空間
就是有個(gè)div沒(méi)有任何樣式的時(shí)候，瀏覽器是按照自動(dòng)填充的樣式呈現(xiàn)的，就是100%width的樣式填充的。按照盒子模式，不僅元素在block中可以呈現(xiàn)自動(dòng)填滿空間的樣式，在inline-block上也是可以這樣呈現(xiàn)的（包裹收縮的inline-block元素上，這里說(shuō)的inline-block是具有收縮特性）。

div { display:inline-block; width:fill-available; }

2.max-content和min-content是會(huì)個(gè)跟隨有定寬的的最大最小寬度，不會(huì)進(jìn)行收縮。

3.fit-content的屬性 width:fit-content可以實(shí)現(xiàn)元素收縮效果的同時(shí)，保持原本的block水平狀態(tài)，于是，就可以直接使用margin:auto實(shí)現(xiàn)元素向內(nèi)自適應(yīng)同時(shí)的居中效果了。就是div的自適應(yīng)寬度不是100%而是內(nèi)容的大小。很好的實(shí)現(xiàn)了，block元素的水平居中。

下面一張圖形象的體現(xiàn)了四個(gè)屬性的表現(xiàn)

需要提一下的是：max-content 和fit-content， 當(dāng)元素內(nèi)容沒(méi)有超出行寬的時(shí)候，最終的寬度都是內(nèi)容的寬度。而超出行寬的時(shí)候，max-content的表現(xiàn)是不換行，出現(xiàn)橫向滾動(dòng)條，fit-content的表現(xiàn)是會(huì)換行。

兼容性：

代碼如下：

學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（從零基礎(chǔ)開(kāi)始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，職業(yè)規(guī)劃）