fill-available和width:100%的区别
fill-available:自动填充可用空间，注意是可用空间，自然不包括padding和margin
首先，我们看看在没有padding和margin的情况下。
css代码.parent{ width: 300px; outline: 1px dashed #f00; } .child{background: #000; width: 100%; }
html
这里设置了padding跟width:100%的时候会撑破外层，但fill-available不会
此时并未撑破；接下来观察有padding/margin的时候
在子div里面设置padding:20px;结果如下
可以发现此时子div已经撑破父div。同理可以设置width:fill-available相对比，fill-available是智能计算剩下可用空间。
总计来说就是： 如果没有padding/margin等其他属性干扰，等同于100% 。 fill-available会尽可能占用剩下的可用空间 。一旦和padding/margin结合一起使用的时候 ，width:100%会撑破布局，而width:fill-available不会