一下的四個(gè)css3自適應(yīng)可用于設(shè)置寬高屬性念赶，這幾個(gè)屬性是分別上篇文章四個(gè) width: auto 的寬度表現(xiàn)茄猫。
IE瀏覽器不支持，webkit內(nèi)核瀏覽器需添加-webkit-前綴
1. fill-available
width: fill-available 表示撐滿可用空間鄙漏，div元素的width表現(xiàn)就是fill-available自動(dòng)填滿剩余的空間深碱，fill-available關(guān)鍵字值的價(jià)值在于腹鹉，不僅僅在block水平元素上100%自動(dòng)填充特性，也可以應(yīng)用在其他元素上敷硅。
<style>
div{
background-color: pink;
display:inline-block;
width:-webkit-fill-available;
}
</style>
<div>寬度撐滿了可用寬度</div>
div元素高度撐滿了可用高度
<style>
div.inner{
background-color: red;
height:-webkit-fill-available;
}
</style>
<div style="height: 100px;">
<div class="inner">高度撐滿了可用高度</div>
</div>
利用fill-available可以實(shí)現(xiàn)等高布局
<style>
.inner{
width:100px;
height:-webkit-fill-available;
margin:0 10px;
display: inline-block;
vertical-align: middle;
background-color: pink;
}
</style>
<div style="height: 100px;">
<div class="inner">HTML</div>
<div class="inner">CSS</div>
<div class="inner">JS<br>jQyery<br>Vue</div>
</div>
2. fit-content
width: fit-content表示將元素寬度收縮為內(nèi)容寬度
<style>
div{
background-color: pink;
width:-webkit-fit-content;
}
</style>
<div>元素寬度收縮為內(nèi)容寬度</div>
width: fit-content可以實(shí)現(xiàn)元素收縮效果的同時(shí)功咒，保持原本的block水平狀態(tài)愉阎，于是，就可以直接使用margin:auto實(shí)現(xiàn)元素向內(nèi)自適應(yīng)同時(shí)的居中效果力奋。
<style>
div{
background-color: pink;
width:-webkit-fit-content;
margin:auto;
}
</style>
<div>水平居中</div>
3. min-content
width: min-content表示采用內(nèi)部元素最小寬度值最大的那個(gè)元素的寬度作為最終容器的寬度榜旦。
最小寬度值，例如圖片的最小寬度值就是圖片呈現(xiàn)的寬度景殷，對(duì)于文本元素溅呢，如果全部是中文，則最小寬度值就是一個(gè)中文的寬度值猿挚；如果包含英文咐旧，因?yàn)槟J(rèn)英文單詞不換行，所以绩蜻，最小寬度可能就是里面最長(zhǎng)的英文單詞的寬度休偶。
<style>
.outer{
width:-webkit-min-content;
}
</style>
<div class="outer">
<div style="height:10px;width:100px;background:lightgreen"></div>
<div style="background-color: pink;">小火柴的藍(lán)色理想</div>
</div>
4. max-content
width: max-content表示采用內(nèi)部元素寬度值最大的那個(gè)元素的寬度作為最終容器的寬度。如果出現(xiàn)文本辜羊，則相當(dāng)于文本不換行踏兜。
<style>
.outer{
width:-webkit-max-content;
border:1px solid black;
}
</style>
<div class="outer">
<div style="height:10px;width:100px;background:lightgreen"></div>
<div style="background-color: pink;">最大寬度最大寬度最大寬度最大寬度最大寬度最大寬度最大寬度最大寬度最大寬度最大寬度最大寬度最大寬度最大寬度
</div>
</div>
