CSS常用小技巧

1.隐藏overflow滚动条

::-webkit-scrollbar {
    display:none
}

2.单行文字两端对齐（例：输入框前的label）

// 若考虑兼容，文字间要有空格
{
　　text-align: justify
　　text-align-last: justify
}

3.文字超出显示省略号

// 单行文字
{
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;  // 显示省略号代替被修剪的符号
    white-space: nowrap;  // 禁止换行
}
// 多行文字
{
    width: 100px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;    // 文字行数
    overflow: hidden;
}

4.vue穿透scoped修改外部、第三方组件样式（例：修改elementUI样式）

　css：　

　　选择器选中外部盒子 >>> 组件类名{ 样式 }

　sass、less：　　

　　/deep/ 组件类名{ 样式 }

// 示例
.box >>> .el-tag {
  cursor: pointer;
}

/deep/ .el-tag {
  cursor: pointer;
}

5.盒子内绝对居中

{
    width: 400px;
    height: 400px;
    display: flex;
    border: 1px solid #000;
    align-items: center;　　// 上下居中
    justify-content: center;　　// 左右居中
}

6.纵向全屏布局

body,
html {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
// body没有高度的直接子元素css：flex：1

后续慢慢添加...