c3中對(duì)width的值多了幾個(gè)值：fill-available, max-content, min-content, 以及fit-content。

1.width:fill-available

我們?cè)陧?yè)面中扔一個(gè)沒有其他樣式的<div>元素，則，此時(shí)，該<div>元素的width表現(xiàn)就是fill-available自動(dòng)填滿剩余的空間。

2.width:max-content

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

3.width:min-content

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

4.width:fit-content

width:fit-content也是應(yīng)該比較好理解的，“shrink-to-fit”表現(xiàn)，換句話說，和CSS2.1中的float, absolute, inline-block的尺寸收縮表現(xiàn)是一樣的。

OK，然后，有小伙伴會(huì)疑問，既然跟很多CSS聲明有一樣的表現(xiàn)，那為什么還要再弄個(gè)新東西呢？

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

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

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

總結(jié)：

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

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

最新評(píng)論