html - CSS中width:fill-available和width:100%的区别?
本文介绍了html - CSS中width:fill-available和width:100%的区别?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
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%
,但若有属性干扰,那就会智能计算。
这篇关于html - CSS中width:fill-available和width:100%的区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文