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;