c3中對width的值多了幾個值：fill-available, max-content, min-content, 以及fit-content。

1.width:fill-available

我們在頁面中扔一個沒有其他樣式的<div>元素，則，此時，該<div>元素的width表現就是fill-available自動填滿剩余的空間。

2.width:max-content

假設我們的容器有足夠的寬度，足夠的空間，此時，所占據的寬度是就是max-content所表示的尺寸。

3.width:min-content

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

4.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水平狀態(tài)，于是，就可以直接使用margin:auto實現元素向內自適應同時的居中效果了。

<div class="w-box">
	<img src="/static/logo.png">
</div>

總結：

上面水平居中的案例就是很好的說明，可以讓元素保留原有display值的特性的同時，擁有別的display值的特性。

到此這篇關于CSS3 max/min-content及fit-content、fill-available值的詳解的文章就介紹到這了,更多相關CSS3 max/min-content fit-content、fill-available值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論