容易忘记但很重要的css（持续更新）

容易忘记但很重要的css

——记录自己玩项目时，比较容易忘记但很重要的css，我自己封装成一个类了，调用时直接添加相应的类名就可以了

1.实现三角形

实现原理：

1. 将一个div的宽高都设置为0
2. 设置 border 的大小 跟 样式(dotted solid double dashed)，一般使用 solid
3. 为想要的方向的三角形上色，其他都设置为 transparent
   注： 为了更加直观看出来，下面的代码就不是单单显示一个三角形了，而是4个不同颜色三角形组成的正方形，需要哪个三角形就把其他的颜色改为 transparent

#triangle {
  width: 0;
  height: 0;
  border: 100px solid;
  border-top-color: red;
  border-bottom-color: skyblue;
  border-left-color: yellow;
  border-right-color: pink;
}

/* <div id="triangle"></div> */ 

2. 封装间隔线（diver）

为移动端列表li下添加间隔线

.diver{
  height: 20px;
  background-color: #f1f1f1;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1) inset;
}

/* <div class="diver"></div> */ 

3. 封装细线边框

移动端边框问题：右边框普通写法占位置,也容易“对不齐”
解决方法：伪元+定位

.bd-r{
  position: relative;
}
.bd-r::after{
  content: "";
  width: 1px;
  height: 100%;
  background-color: #ccc;
  position: absolute;
  right: 0;
  top: 0;
}

/* <div class="bd-r"></div> */ 

4. 封装向右小箭头

解决方法：先取上右两边框，再向右转45度

.arrow{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.arrow::after{
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1px solid #aaa;
  border-right: 1px solid #aaa;
  transform: rotate(45deg);
}

/* <div class="arrow"></div> */ 

5. 封装单行超出边省略号

使用这个类记得自己设置宽度

.ellipsis{
  overflow: hidden;
   /* 设置不换行 */
  white-space: nowrap;
  /* 设置超出变为省略号*/
  text-overflow: ellipsis; 
}
.row{
  width: 100px;
  height: 50px;
}
/* <div class="row ellipsis"></div> */ 

6. 加载更多动画（小圆圈自转）

下面background里面的url需要自己添加图片路径

.loadmore{
  color: #888;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
}
.loadmore.loading::before{
  content: "";
  width: 24px;
  height: 24px;
  margin-top: -6px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
  animation: loading 1s steps(12) infinite;
  background: transparent url('xxx') no-repeat;
  background-size: 100%;
}
@keyframes loading {
  0%{
      transform: rotate(0deg);
  }
  100%{
      transform: rotate(360deg);
  }
}

/* <div class="loading loadmore"></div> */ 

7. 封装对话气泡

这是一个小三角指向右的对话框，对话框的小三角形可自行修改，只要修改before里面的 bottom、left、border-color就行了

.bubble{
  width: 200px;
  height: 100px;
  border: 2px solid skyblue;
  border-radius: 7px;  /*圆角弧度为7px*/
  position: relative;
  background-color: skyblue;
}
.bubble::before {
  content: '';
  width: 0;
  height: 0;
  border: 20px solid;
  position: absolute;
  bottom: 20px;
  left: 100%;
  border-color: transparent transparent transparent skyblue;
}

8. 隐藏滚动条或更改滚动条样式

直接在扔到css文件中就行，不用再加什么类名什么了，

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 10px; /*对垂直流动条有效*/
  /*height: 10px; 对水平流动条有效*/
}

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

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{ 
  border-radius: 7px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #e8e8e8;
}
/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
  background-color: bisque;
}

9.inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

原因：当一个inline-block元素被设置overflow非visible属性值后，其baseline将被强制修改为元素下外边沿。
默认情况下，vertical-align: baseline

.deviation{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom; /*关键代码*/
}

10. 封装文本首行缩进，自动换行,字符间距

.myText{
  text-indent: 2em;
  letter-spacing: 2px;
  word-wrap: break-word;
}

11. 封装textarea，去掉拖拽、隐藏滚动条

.myTextarea{
  overflow: hidden; /* 隐藏滚动条 */
  resize: none; /* 禁止拖拽*/
}

---

记录总结一下自己学到的东西。可能写得不是很好，有错误的东西请大家指正，互相学习！！