css3自适应法宝fill-available、fit-content、max-content、min-content

1,fill-available表示撑满可用空间（包括高度，宽度），下面一个栗子，表示下

<style type="text/css">
.box{
60%;
height: 500px;
border: 1px solid #f00;
margin: 20px auto 0;
}
.son{
-webkit-fill-available;
background: #ff0;
height:200px;/*高也可以是fill-available*/
}
</style>
<div class="box">
<div class="son"></div>
</div>
2,fit-content

fit-content表示宽度缩小到内容的宽度，

3,max-content

max-conten表示用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。简单了说就是文字不换行

4,min-content

min-content表示用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。这个最小宽度值有最大什么意思，如果是图片的话最小宽度值就是图片所呈现的宽度，如果是汉字就是一个字的宽度，如果是英文就是单词的宽度

<style>
.box{
-webkit-min-content;
border:1px solid pink;
}
.brother{
120px;
height: 20px;
background: #f00;
}
</style>
<div class="box">
<div class="brother"></div>
<div class="son">八百标兵奔北坡，炮兵并排北边跑</div>
</div>