总结css常用方法

1、自定义滚动条

.test-1::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

 2、字数不同垂直title以冒号对齐方式

css

.detail-message .letter{
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
}
.detail-message .letter:after{
    content:"";
    display: inline-block;
    width:100%;
}

html

 <div class="contactus">
     <ul class="detail-message">
         <li>
             <span class="letter" style="width:70px;text-align:justify">版本号:</span>
             <span>V1.0</span>
          </li>
          <li>
             <span class="letter" style="width:70px;text-align:justify">技术支持:</span>
             <span>XXXX</span>
          </li>              
     </ul>
 </div>

3、元素垂水平直居中最简单方法

 flex-direction:column;
    display: flex;
    justify-content:center;
    align-items:Center;
    text-align: center;    

 4、去除input默认背景色

input:-webkit-autofill { 
　-webkit-text-fill-color: #000 !important;
　-webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s; 
}

 

转载于:https://www.cnblogs.com/zhouxiaobai/p/9406975.html