我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
fit-content()函数
css3的grid格子布局中,对于设置格子大小的处理,要么是固定的,要么是百分比这种相对的。
如果电脑端这个header的高度为50px,而手机端由于大小限制,原来50px可能要变成30px,那么此时我们可以利用媒体查询去调整:grid-template-rows
属性。
grid-template-rows: 30px 1fr;
调整完这个大小后,我们还要调整里面元素的大小,这样做可能有点麻烦。
甚至于我们可能只是改变了里面元素的布局而已,横向的布局改为竖列的多行布局,那么这个高度可能是无法精确获取的,如果内容的高度为100px呢,而我们只设置了30px
grid的默认效果会是一个overflow: hidden
;也就是说元素会将超出部分自动截断,这显然不符合我们的需求。
而fit-content()
是一个非常有用的函数,虽然他的官方说明和实际效果有点出入,且只能用于grid中。
这个函数接收两个参数,第二个参数没什么用,懒得说了,第一个参数为元素内容过多时,最大也只能是传入的参数大小,比如我传入一个20px;那么不管元素包含的内容有多大,容器只有20px。
然而这个解释已经过时了,现在fit-content()传入的第一个参数没有实际作用了,但是不传又不行,传了,不管元素大小怎么变化,容器大小永远为最小的内容大小。
不传被视为auto了,所以这个要注意。
可能这里有人要讲,css3不是还有一个fit-content的属性值吗,然而这个属性浏览器还是需要加浏览器前缀的,在grid中也不支持使用该属性,而只能用于width的css设置。
所以用处有点局限性了。
例子:
.grid {
height: 100%;
display: grid;
grid-template-columns: repeat(2, [col-start] 25% [col-end]);
grid-template-rows: 200px auto fit-content(20px);
}
0
评论(0)