80%必被用到的前端知识点

1. flex 固定宽度被压缩

 flex-shrink: 0;

1.滚动条样式

 ::-webkit-scrollbar {
    // 滚动条的背景
    width: 10px;
    background: #191a37;
    height: 14px;
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-thumb {
    border-radius: 999px;
    width: 10px;
    border: 5px solid transparent;
  }

  ::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px #191a37 inset;
  }

  ::-webkit-scrollbar-thumb {
    //滚动条的滑块样式修改
    width: 10px;
    background-clip: content-box;
    box-shadow: 0 0 0 5px #464f70 inset;
  }

  ::-webkit-scrollbar-corner {
    background: #191a37;
  }

1.css 一行文本超出…

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

2.多行文本超出显示…

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

3.使用 css 写出一个三角形角标

div {
    width: 0;
    height: 0;
    border: 5px solid #transparent;
    border-top-color: red;
}

4.css 字间距

 letter-spacing: 2px;

5.隐藏页面元素

display-none: 元素不存在，从 dom 中删除

opacity-0: 元素透明度将为 0，但元素仍然存在，绑定的事件仍旧有效仍可触发执行。

visibility-hidden：元素隐藏，但元素仍旧存在，页面中无法触发该元素的事件。

6.字体渐变色

   color: transparent;
   
   background: linear-gradient(to right, #2edddb, #15bc98);
    
   -webkit-background-clip: text;

7.字体间距

    letter-spacing: 12px;

8.生成随机字符串

let str = Math.random().toString(36).substr(2, 10)
console.log('str: ', str);			//um80gzm52r

9.最快获取dom元素

绑定id    <div id="box">111</div>
直接   console.log(box)   //	<div id="box">111</div>