前端实用css积累

1、禁止一个容器上所有的鼠标事件，例如我们不想删除事件重新注册事件的时候很有用；

.box{
    pointer-events: none;
}

2、禁止用户选择某个容器下的文本；

.box{
    user-select: none;
}

3、设置非absolute的元素的z-index，如果相同父容器下面还有absolute的元素，可以设置比较大的z-index，放在absolute上层展示；

.box{
    position: relative;
    z-index: 10;
}

4、设置高度是屏幕高度为全屏，之前都是通过height:100%从上往下元素都写上，可以使用下面的方法；

.box{
    height: 100vh;
}

vh是新的单位，就是将屏幕的高度拆分100份，1vh代表1/100窗口高度。

5、使用两个图片做背景图（当然这个是有局限性的，因为background-size只能设置一次）；

.box{
  background: url(../images/bg2.png) no-repeat bottom, url(../images/bg1.png) no-repeat top;
  background-size: 320px auto;
}

6、修改输入框placeholder的样式和光标样式，注意所有的前缀都需要写上，要不然怕不会生效；

input {
  color: #435d57;
  caret-color: #42E9C6;
}

input::-ms-input-placeholder {
    color: #fff;
}

input::-webkit-input-placeholder {
    color: #fff;
}

input::-moz-input-placeholder {
    color: #fff;
}

/* --- 后续更新 https://blog.csdn.net/q5706503/article/details/82826901 --- */
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    red;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:   red;
}
input::-ms-input-placeholder { /* Microsoft Edge */
   color:    red;
}

7、实用nth-child选中前面n个元素并设置样式，例如展示进度条的当前进度等；

/* 选中了前三个元素并且设置背景色为绿色 */
:nth-child(-n+3){
  background-color: green;
}

8、超出使用 ... ；

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

9、如何去掉 chrome input 的背景黄色；

/* 方案1 */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset !important;
}

/* 方案2 */
input:-webkit-autofill {
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}

@-webkit-keyframes autofill {
  to {
    color: #fff;
    background: transparent;
  }
}

10、css3 画小箭头；

/* 第一种实现：其一，通过 border 来实现 */
/*箭头向上*/
.arrow-up {
  width:0;
  height:0;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
  border-bottom:30px solid #fff;
}
/*箭头向下*/
.arrow-down {
  width:0;
  height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-top:20px solid #0066cc;
}

/* 其二，拼凑法（伪类或元素），将 div 隐藏两边或设置 z-index，然后旋转，放到合适位置。 */
div {
  position: absolute;
  bottom: -2px;
  left: 7px;
  width: 10px;
  height: 10px;
  transform: rotate(-45deg);
  z-index: -1; /* 放在容器后，被遮盖住*/
}

11、支持局部滚动弹性滚动，在ios上可以增强滚动的流畅度

body {
    -webkit-overflow-scrolling: touch;
}

12、禁止滚动传播；滚动穿透？

.elem {
    overscroll-behavior: contain;
}

13、移动端点击触摸元素会出现半透明灰色遮罩，不想要！

* {
    -webkit-tap-highlight-color: transparent;
}

14、控制溢出文本；多行文本溢出实用...

.elem {
    width: 400px;
    line-height: 30px;
    font-size: 20px;
    &.sl-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &.ml-ellipsis {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}

// 其他实现方式
// 参考：https://libin1991.github.io/2019/01/02/JS实现多行溢出省略号思路/
.one-line {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /*clip  修剪文本。*/
}

.more-line {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

15、一个有条纹的并且动态的进度条（https://getbootstrap.com/docs/5.0/components/progress/）

.striped {
  background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-size: 1rem 1rem;
  // 显示动画
  animation: 1s linear infinite progress-bar-stripes;
}
// 显示动画
@keyframes progress-bar-stripes {
  0% { background-position-x: @progress-height; }
}

16、生成一个3/4圆形的加载动画（设置一个边的边框为透明）

.spinner{
  width: 2rem;
  height: 2rem;
  border: .25em solid #ccc;
  border-right-color: transparent;
  border-radius: 50%;
  animation: .75s linear infinite spinner-border;
}

17、自定义字体优化加载顺序；swap是一个比较好的选择；

@font-face {
  font-family: "OPPOSans-M";
  font-display: swap;
  src: url("https://fxd-cdn.codoon.com/static/20210825/OPPOSans-M.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

18、移动端overflow:auto有滚动条之后字体变大；参考链接：html5 - 移动端 盒子内加overflow-y:scroll后 字体会变大 - SegmentFault 思否

body * {
  max-height: 999999px;
}

19、iconfont在chrome中出现锯齿或加粗处理

使用阿里的iconfont在chrome中出现了毛边锯齿的问题，解决方案：

/*这个值的大小可以在浏览器中调整查看结果*/
.iconfont{
  -webkit-text-stroke-width:2px;
  /*加粗的情况可以使用下面的代码处理，iconfont已经处理了*/
  -webkit-font-smoothing: antialiased;
}

参考

https://libin1991.github.io/2019/01/02/JS实现多行溢出省略号思路/

Progress · Bootstrap v5.0

html5 - 移动端 盒子内加overflow-y:scroll后 字体会变大 - SegmentFault 思否