2021年你需要掌握的前端小知识

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

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

2.水平垂直居中

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

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

3.contenteditable,html中大部分标签都是不可以编辑的，但是添加了contenteditable属性之后，标签会变成可编辑状态。

<div contenteditable="true"></div>

4.通过replace方法获取url中的参数键值对，可以快速解析get参数。

const q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q); 

5.pointer-events: none;

如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素

6.多行文本超出显示省略号

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