Open zhangzheng-zz opened 3 years ago
多个img
之间有间距?包含img
标签的div
之间有间距?
多个img
标签的左右间隙,行内元素之间有“回车”、“tab”、“空格”。
块级元素包含内联元素如图片文字等时,内联元素默认是和父级元素的baseline
(基线)对齐的,而baseline
又和父级元素底边有一定的距离(与font
有关,不一定是5px),包含图片的不同div
之间有间隙,这是因为图片与父元素的底边有距离。
解决方案:
img
之间的间隙,父级设置 font-size: 0
img
的div
之间有间隙,img
设置vertical-align: bottom
div
和img
之间有间隙,img
设置display: block
<span>{{showInTheGameData.actDate}}</span>
(<span>{{showInTheGameData.periodNum}}</span>)期
<span>参赛中</span>
// 第二个 span 标签的左右会产生空白符
解决方法:
linear-gradient() linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
下面来看一下 linear-gradient
在 vant
的 area 组件里面的一个应用。最近遇到一个小需求需要适配一下 vant
的 area
组件的暗色模式(把背景改成黑色字体改成白色就行),唯一的问题就是透明渐变的效果是怎么实现的?
area 组件:
先把背景改成黑色字体改成白色马上就明白它的实现原理:
观察一下代码:一个 mask
白色的蒙版,上下垂直角度各有一个透明度的渐变效果,越靠近中间透明度越高。
background-image:
linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),
linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));
改成暗色模式:mask
蒙版改成黑色。
background-image:
linear-gradient(180deg,hsla(0,0%,0%,.9),hsla(0,0%,0%,.4)),
linear-gradient(0deg,hsla(0,0%,0%,.9),hsla(0,0%,0%,.4));
最终效果:
黑暗模式,CSS的控制可以使用CSS变量。
rem 移动端适配
rem vw 媒体查询
1080px
font-size
自定义为100px
方便计算font-size
的大小:10000 / 1080 = 9.259259259...
单位是vw
vw
单位的情况,使用媒体查询动态改变font-size
的大小 (保持设备与font-size
比例和1080 / 100
一致)css
全局的html
的font-size
可以这样写:@media screen and (max-width: 320px) { html { font-size:29.629px; font-size: 9.25925925vw } }
@media screen and (min-width: 321px) and (max-width:360px) { html { font-size:33.333px; font-size: 9.25925925vw } } ......