1：vertical-align和line-height 导致的幽灵空白结点
<div style="background-color: red;margin-bottom: 20px;">
<img src="https://img1.baidu.com/it/u=2397746082,385656063&fm=253&fmt=auto&app=138&f=JPEG?w=739&h=500" alt="" srcset="">
<span style="background-color: white;">123</span>
</div>
图片下面会有空白效果，没有和红色背景重合，这是因为文字的 默认 vertical-align 为baseline，css 基线如下，以小写字母x的位置为文字的基线。
在上面的图片中，图片本身为display 属性为 inline，默认是与基线对齐，而文字 xxx 本身有高度，于是图片本身就留空了
解决方式：
- vertical-align 只在 inline/inline-block 元素上生效，可以把img 改成block属性
- 设置 vertical-align 其他值
- 改变 line-height 的值，比如设置 父元素的 font-size 值
2：微信小程序使用 rpx 布局
Ui ****走查 的时候为什么在不同机型上展示的布局略有差异？
首先来看看 rem 布局，根据 设备宽度设置一个 rem的值，rem单位无论嵌套层级如何，都只相对于浏览器的根元素
rem = document.documentElement.clientWidth / 10
但是要注意的是，每个手机的宽高比是不同的，所以小程序在真机上展示的时候，高度如果是通过 rem 作为单位，那么展现出来的可能会略有差异。
再来看看 rpx，rpx 和rem 一样也是以宽度进行自适应，所以在不同真机上展示的间距可能会略有差异，但是手机宽高比不会差很多，所以展现的不会差距太大，ui 走查 时，如果ui使用和设计稿不同宽高比的手机截图，那么展示的就会略有差异
3: 1px 问题
常规理解，1px = 1 物理像素 = 1 css 像素
但是在移动端中却不是这样的，这里有个设备像素比（DPR） 的概念
设备独立像素，这是截图的 chrome 的数据
物理像素
以 iPhone7 为例：
可以看到，iPhone7 的分辨率是 1334 x 750，这里描述的就是屏幕实际的物理像素。
设备像素比：DPR = 物理像素 / 设备独立像素
DPR = 750 / 375 = 2
这个单位说明，2 * 2 个物理像素 等于 1个css像素，所以在移动端设置1px ，实际展示的物理像素就是0.5px，加上各种机型的DPR 不一样，1px 在手机上展现的效果也不一样
解决方案，推荐阅读：www.51cto.com/article/712…
