1贡这、使用css寫出一個三角形角標
元素寬高設置為0戈泼,通過border屬性來設置南片,讓其它三個方向的border顏色為透明或者和背景色保持一致,剩余一條border的顏色設置為需要的顏色寺渗。
div {
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: red;
}
2匿情、div水平垂直居中
父級控制子級居中(最簡單的方法)
.parent {
display: flex;
justify-content: center;
align-items: center;
}
3、文本溢出
單行:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
4信殊、隱藏頁面元素
display: none; 元素不會占用空間炬称,在頁面中不顯示,子元素也不會顯示涡拘。
opacity: 0; 元素透明度為0转砖,但元素仍然存在,綁定的事件有效仍可觸發(fā)執(zhí)行。
visibility: hidden; 元素隱藏府蔗,但元素仍舊存在晋控,占用空間,頁面中無法觸發(fā)該元素的事件姓赤。
5赡译、calc
這是一個css屬性,可以計算css的值不铆。最有趣的是他可以計算不同單位的差值蝌焚。
div {
width: calc(25% - 20px);
}