常用的css样式

1:flex布局

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-evenly {
    display: flex;
    justify-content: space-evenly;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.TB-center {
    display: flex;
    align-items: center;
}

.flex-grow {
    flex-grow: 1;
}

2:表格类

1:表格的单元格超出变为 ...

常用的css样式_第1张图片

::v-deep .el-table .cell.el-tooltip div{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

其他常见的:

1:点击出现小手蓝色

.clickStyle {
    cursor: pointer;
    color: #409eff;
}

2:超出(一/二行)变为...

//超出(一行),变为...(点点点)
.font-ellipsis-one {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
//超出(二行),变为...(点点点)
.font-ellipsis-two {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

3:阴影

//         阴影
.shadow {
	box-shadow: 0px 0px 15px 5px #ccc;
}
/*
	h-shadow	必需的。水平阴影的位置。允许负值
  v-shadow	必需的。垂直阴影的位置。允许负值
  blur	可选。模糊距离
  spread	可选。阴影的大小
  color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
  inset	可选。从外层的阴影(开始时)改变阴影内侧阴影
*/

你可能感兴趣的:(css,vue.js,javascript)