css3自适应fill-available
width:fill-available表示撑满可用空间
举例来说，页面中一个<div>元素，该<div>元素的width表现就是fill-available自动填满剩余的空间
出现fill-available关键字值的价值在于，可以让元素的100%自动填充特性不仅仅在block水平元素上，也可以应用在其他元素
下面的例子中，inline-block元素宽度撑满了可用宽度
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #tt{ background-color: pink; display:inline-block; width:-webkit-fill-available; } </style> </head> <body> <div id="tt">自适应总结</div> </body> </html> 
类似的高度也有此特性
下面的例子中，div元素高度撑满了可用高度
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #dd{ height: 100px; } #tt{ background-color: pink; height:-webkit-fill-available; } </style> </head> <body> <div id="dd"> <div id="tt">自适应总结</div> </div> </body> </html> 
等高布局
于是，利用fill-available可以轻松地实现等高布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #dd{ height: 100px; } .tt{ width:100px; height:-webkit-fill-available; margin:0 10px; display: inline-block; vertical-align: middle; background-color: pink; } </style> </head> <body> <div id="dd"> <div class="tt">首页</div> <div class="tt">Html/Css</div> <div class="tt">JavaScript</div> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知