css样式设定之项目常用到的

1. 文字和图片底部对齐：给所有子元素添加vertical-align: middle;

要实现的效果如下

 该属性的作用是将元素盒子的垂直中点和父盒子的baseline加上父盒子的x-height的一半对齐

 <div class="content">
       <span>流量：</span>
       <span>22m/s</span>
       <i class="icon"></i>
</div>

.content {
    
    .icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url('~@/_images/cysx/table-line.png') no-repeat center/100% 100%;
      vertical-align: middle;      
    }

 不加该属性时的效果

2. 修改滚动条的样式

.fac-content {
    width: 100%;
    height: calc(100% - 50px);
    background: url('~@/_images/cysx/warning-detail-box.png') no-repeat center/100% 100%;
    padding: 8px 16px;
    overflow-y: auto;
          
    /* 设置滚动条的整体样式 */
     &::-webkit-scrollbar {
        width: 8px;
     }
     /* 滚动槽 */
     &::-webkit-scrollbar-track {
         border-radius: 10px;
     }
     /* 滚动条滑块 */
     &::-webkit-scrollbar-thumb {
         border-radius: 10px;
         background: rgb(165, 42, 42);
     }
}