fill-available
fill-available表示撐滿可用空間（包括高度，寬度）痢甘，下面一個(gè)栗子喇嘱，表示下
<style type="text/css">
.box{
width: 60%;
height: 500px;
border: 1px solid #f00;
margin: 20px auto 0;
}
.son{
width: -webkit-fill-available;
background: #ff0;
height:200px;/*高也可以是fill-available*/
}
</style>
<div class="box">
<div class="son"></div>
</div>
[圖片上傳失敗...(image-710876-1514382697160)]
fill-available對(duì)于行內(nèi)塊（inline-block）和塊元素（block）起作用,這個(gè)要注意哦，等高布局就更簡(jiǎn)單了
<style type="text/css">
.box{
height: 200px;
}
.son{
width: 30%;
height: -webkit-fill-available;
background: #f00;
display: inline-block;
}
</style>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
這里寫(xiě)圖片描述
fit-content
fit-content表示寬度縮小到內(nèi)容的寬度塞栅，下面have a 栗子者铜，go! go! go!
<style type="text/css">
div{
background-color: #f00;
width:-webkit-fit-content;
}
</style>
<div>
八百標(biāo)兵奔北坡，炮兵并排北邊跑
</div>
這里寫(xiě)圖片描述
本來(lái)作為塊元素的div會(huì)繼承父級(jí)的寬度，然而加fit-content寬度就會(huì)縮小到內(nèi)容寬度,水平居中還用說(shuō)嗎作烟？果斷的價(jià)格margin:auto就ok啊愉粤，效果我就不截圖了。
max-content
max-conten表示用內(nèi)部元素寬度值最大的那個(gè)元素的寬度作為最終容器的寬度拿撩。簡(jiǎn)單了說(shuō)就是文字不換行衣厘。咱們?nèi)コ詡€(gè)栗子就ok了
<style type="text/css">
.box{
width:-webkit-max-content;
}
.son{
background: #ff0;
}
</style>
<div class="box">
<div class="son">八百標(biāo)兵奔北坡，炮兵并排北邊跑,炮兵怕把標(biāo)兵碰压恒，標(biāo)兵怕碰炮兵炮头滔。八百標(biāo)兵奔北坡，炮兵并排北邊跑,炮兵怕把標(biāo)兵碰涎显，標(biāo)兵怕碰炮兵炮八百標(biāo)兵奔北坡坤检，炮兵并排北邊跑,炮兵怕把標(biāo)兵碰，標(biāo)兵怕碰炮兵炮八百標(biāo)兵奔北坡期吓，炮兵并排北邊跑,炮兵怕把標(biāo)兵碰早歇，標(biāo)兵怕碰炮兵炮八百標(biāo)兵奔北坡，炮兵并排北邊跑,炮兵怕把標(biāo)兵碰讨勤，標(biāo)兵怕碰炮兵炮箭跳。八百標(biāo)兵奔北坡，炮兵并排北邊跑,炮兵怕把標(biāo)兵碰潭千，標(biāo)兵怕碰炮兵炮谱姓。</div>
</div>
這個(gè)效果咱就不看了，截圖比較費(fèi)勁刨晴，高級(jí)編程語(yǔ)言ctrl+c,ctrl+v效果就出來(lái)了屉来。
min-content
min-content表示用內(nèi)部元素最小寬度值最大的那個(gè)元素的寬度作為最終容器的寬度。這個(gè)最小寬度值有最大什么意思狈癞，如果是圖片的話最小寬度值就是圖片所呈現(xiàn)的寬度茄靠，如果是漢字就是一個(gè)字的寬度，如果是英文就是單詞的寬度蝶桶，ok了慨绳。
<style>
.box{
width:-webkit-min-content;
border:1px solid pink;
}
.brother{
width: 120px;
height: 20px;
background: #f00;
}
</style>
<div class="box">
<div class="brother"></div>
<div class="son">八百標(biāo)兵奔北坡，炮兵并排北邊跑</div>
</div>
這里寫(xiě)圖片描述
ok,上面就是本人拙見(jiàn)真竖，如有出入脐雪，還請(qǐng)指正，謝謝；止病Ｕ角铩！
