web前端入門到實(shí)戰(zhàn)：CSS3中width值為max/min-content及fit-content

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

分別介紹一下這三個(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ī)劃）
<style>
    .dom{
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content; 
    }
</style>