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

原创已于 2023-08-14 17:10:46 修改 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

于 2022-09-29 11:30:08 首次发布

本文介绍了如何使用CSS实现文字和图片在<div>元素中的垂直居中对齐，以及如何修改滚动条样式，提供了一个<span>流量</span>示例，并详细讲解了vertical-align:middle属性的应用。同时展示了如何定制滚动条的颜色和圆角效果。

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);
     }
}