日常没有注意的css

1.微信小程序中碰到 height:40rpx;line-height:40rpx;并不能上下居中

　　

要实现如上效果，代码往简单写最开始想到用height跟line-height结合text-align实现居中效果：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

height: 40rpx; line-height:40rpx; width: 86rpx; font-size: 24rpx; font-weight: 500; color: #FFFFFF; background: #BDB6A9; letter-spacing: 1rpx; text-align: center; border: 4rpx solid #fff; border-radius: 8rpx; transform: rotate(-5deg); position: absolute; left: 64rpx; top: 86rpx; font-family: PingFangSC-Medium, PingFang SC;

　但实际上，文字不会居中，紧贴着下边框，然后因为高度固定了，尝试直接改变padding-top值，结果开发工具和真机表现不一致，无法统一。考虑是否font-weight:500; font-family: PingFangSC-Medium, PingFang SC;字体是苹果字体，安卓并不存在，造成行高改变不再是40rpx，自然改用padding自然也不能实现。之后改用flex布局实现

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

height: 40rpx; width: 86rpx; font-size: 24rpx; font-weight: 500; color: #FFFFFF; background: #BDB6A9; display:flex; align-items: center; justify-content: space-between; letter-spacing: 1rpx; text-align: center; border: 4rpx solid #fff; border-radius: 8rpx; transform: rotate(-5deg); position: absolute; left: 64rpx; top: 86rpx; font-family: PingFangSC-Medium, PingFang SC;

2.backdrop-filter背景模糊，背景过滤属性，是个非继承属性MDN上是这么说的：可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

?

1	backdrop-filter: blur(6rpx);

兼容性

 2.数字在页面端的表现不一致时，保持数字等宽，设置 font-feature-settings：tnum;