CSS中width:fill-available和width:100%的区别?
简单一点来理解的话,就是fill-available
会尽可能占用剩下的可用空间,但一旦跟padding
/margin
结合一起使用的时候,width:100%
会撑破布局,而width:fill-available
却不会。
给你举个例子:
<div class="parent">
<div class="child">
这里设置了padding跟width:100%的时候会撑破外层,但fill-available不会
</div>
</div>
.parent {
width: 300px;
outlien: 1px dashed #f00;
}
.child {
background: #000;
width: 100%;
width: fill-available;
}
所以总结一下,fill-available
是智能计算剩下可用空间,如果没有padding
/margin
等其它属性干扰,等同于100%
,但若有属性干扰,那就会智能计算。