常用的CSS样式搜集(持续更新中)

深碍√TFBOYSˉ_ 2021-08-02 15:26 454阅读 0赞

### 常用的CSS样式搜集(持续更新中) ###

#### PC端 ####

##### 1. 滚动条美化 #####

::-webkit-scrollbar-track { 
      background: rgba(0, 0, 0, 0.1);
      border-radius: 0;
    }
    
    ::-webkit-scrollbar { 
      -webkit-appearance: none;
      width: 5px;
      height: 5px;
      // 备注：滚动条隐藏
      display: none;
    }
    
    ::-webkit-scrollbar-thumb { 
      cursor: pointer;
      border-radius: 5px;
      background: rgba(0, 0, 0, 0.25);
      transition: color 0.2s ease;
    }

##### 2. 文本高度超出后，出现滚动条 #####

height: 200px; //设置固定高度或者最大高度
    overflow: auto;

##### 3.头部导航栏阴影效果 #####

box-shadow: 0 -1px 14px rgba(0,0,0,.5);

--------------------

#### mobile端 ####

##### 1. #####

--------------------

#### PC端与mobile通用样式 ####

##### 1. 元素查找 #####

* {
    	outline: 1px solid red;
    }

备注：对当前页面的所有元素使用该样式，可以准确看到每一个标签的大小及便捷边界位置，方便元素审查与样式调整。

##### 2. flex布局 #####

/* 行布局 */
    
    .row-between-center { 
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .row-between-start { 
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .row-start-center { 
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    
    .row-start-start { 
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }
    
    .row-end-center { 
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    
    .row-around-center { 
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    
    .row-center-center { 
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    
    /* 列布局 */
    
    .column-between-center { 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    
    .column-between-start { 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .column-around-center { 
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    
    .column-start-center { 
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    
    .column-start-start { 
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    
    .column-between-center { 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    
    
    /* 单个元素居中布局 */
    
    .center-layout-container { 
        display: flex;
        justify-content: center;
        align-items: center;
    }