问题（非强迫症误入！）
今天做项目时，在我最喜欢的静态组件ctrl+C ctrl+V环节时，或许是因为强迫症，我看到这左右两行文字间小到不能再小的差异，看着有个1~3px的偏差
受不了！为什么左右两行文字不在同一水平线上？！！！！
排查
OKOK~
我反手直接打开.vue文件查看<template>和<style>的这两个地方。
细看，<div class="sumprice">和<div class="chosed">，好像只有<i class="summoney">不同
好咯...
那这个看起来只有小几px的偏差到底是哪里来的?打开浏览器检查元素，好像没毛病呀，两个盒子都完美贴合上下线，那到底是哪里出了问题呢
按道理来说，一个盒子里的height属性值和文字的line-height一样高，那么文字是会在盒子竖直居中的。利用浏览器动态调试，这个height怎么调，chosed盒子是一个屹立不倒，不过我好像发现了点什么！
聪明如你我，没错，我这回试了试调节刚才我们一直没有重视的差异：
<i class="summoney">
我发现他的font-size是16px，而其他的地方都是默认为12px，将他动态调回12px
芜湖！终于让两行文字水平了！
那么出现这个偏差的原因显而易见： “总价” 后的这个为了凸显的数字 "0" 的字体比同盒子里面的其他字体大，而因为处于同一行的缘故，会使得他们的底部对齐，视觉上这个 “总价” 就往下走了小几px，真的好细节啊~
解决
业务上这个16px肯定是要保留的，那有没有什么方法不让这个右侧数字影响左侧文字呢
最简单的就是给他加个属性vertical-align:bottom，目的就是让文本底部对齐
忘记了也没事，套个绝对定位，使其自己上沿top固定在父祖件顶端
问题就解决啦，强迫症又舒服了
