记不住的css属性

文字超出显示省略号

1、超出一行显示省略号

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 500px;
}

2、超出多行显示省略号

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-all;
}

英文字符等自动换行

p {
  word-wrap: break-word;
  word-break: break-all;
}

表格边框合并

table {
  border-collapse: collapse;
}

修改滚动条样式

::-webkit-scrollbar {
  width: 10px; /*对垂直流动条有效*/
  height: 10px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .2);
  background-color: red;
  border-radius: 4px;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .2);
  background-color: pink;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
  background-color: green;
}

块超出宽度滚动

ul {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;  /*移动端*/
}
li {
  flex-flow: row nowrap;
  flex-shrink: 0;
}

上下左右居中

/*父级元素*/
.box{
  display: flex;
  justify-content: center;
  align-items: center;
}

箭头（大于号）

&:after{
  content: '';
  width: 6px;
  height: 6px;
  border-left: 2px solid #e6e6e6;
  border-bottom: 2px solid #e6e6e6;
  -webkit-transform: translate(0, -50%) rotate(-135deg);
  transform: translate(0, -50%) rotate(-135deg);
}