前端小知识Day1

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，但元素仍然存在，绑定的事件有效仍可触发执行。
visibility: hidden; 元素隐藏，但元素仍旧存在，占用空间，页面中无法触发该元素的事件。

5、calc

这是一个css属性，可以计算css的值。最有趣的是他可以计算不同单位的差值。

div {
    width: calc(25% - 20px);
}