常用样式

单行文本溢出

1
2
3
4
5
div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

多行文本溢出

1
2
3
4
5
6
div {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

文本截断

1
2
3
div {
  word-break: break-all;
}

元素垂直水平居中

文本居中

1
2
3
4
5
div {
  height: 20px;
  line-height: 20px;
  text-align: center;
}

flex

1
2
3
4
5
div {
  display: flex;
  align-items: center;
  justify-content: center;
}

定位 transform

1
2
3
4
5
6
div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

滚动条

chrome

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/** 自定义webkit滚动条样式 **/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-button {
  display: none;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #ddd;
}

/* 非激活窗口 */
::-webkit-scrollbar-thumb:window-inactive {
  background: #bbb;
}

卡券

主要由radial-gradient颈向渐变和linear-gradient线性渐变这两个 css 属性实现

首先在正方形上扣出一个半圆

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="ticket"></div>

<style>
  .ticket {
    width: 100px;
    height: 100px;
    background-image: radial-gradient(
      circle at 0 50px,
      #fff 10px,
      yellowgreen 10px
    );
  }
</style>

实现锯齿的样式，多个半圆排列在一起就实现锯齿样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.ticket {
  width: 300px;
  height: 100px;
  position: relative;
  background-image: radial-gradient(
      circle at 100px 0,
      #fff 10px,
      transparent 10px
    ), radial-gradient(circle at 100px 100px, #fff 10px, transparent 10px);
  background-color: red;
  border-radius: 0 10px 10px 0;
}

.ticket::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 100%;
  top: 0;
  left: 0;
  background-image: radial-gradient(circle at 0 8px, #fff 5px, transparent 5px);
  /* 需设置background-size属性，否则即使设置repeat属性，也不会有repeat的效果 */
  background-size: 5px 14px;
}

实现虚线的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.ticket::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 100px;
  bottom: 12px;
  width: 1px;
  height: calc(100% - 24px);
  /* 使用linear-gradient实现虚线 */
  background-image: linear-gradient(
    to bottom,
    #ccc,
    #ccc 4px,
    transparent 10px
  );
  background-size: 1px 10px;
}

三角形

1
2
3
4
5
6
7
.triangle {
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: red;
  border-bottom-width: 0;
}

圆形

1
2
3
4
5
6
.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

扇形

1
2
3
4
5
6
7
8
.sector {
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: red;
  border-bottom-width: 0;
  border-radius: 50%;
}

属性

flex

filter

滤镜属性，存在兼容问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 设置元素的灰度，从0到1,颜色越灰 */
filter: grayscale(1);
filter: url(data:image/svg+xml;utf8,#grayscale); /* 兼容IE10、IE11 */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /* 兼容IE6～9 */

/* 设置元素的模糊程度，不接受百分比值 */
filter: blur(5px);

/* 设置元素亮度，0为黑色，1为原本颜色，大于1则更亮 */
filter: brightness();

/* 设置阴影，和box-shadow类似，不过有硬件加速 */
filter: drop-shadow(2px 2px 2px #ccc);

/*设置透明度，0为完全透明，1为完全不透明*/
filter: opacity(0.5);

应用

  1. 整个网站需要至灰时可以使用grayscale函数实现

问题

  1. 使用filter属性后会导致元素的position: fixed失效

transform

选择器

记录一些常用的元素选择器

动画

遇过的问题

absolute 定位随父级滚动

当父级容器设置了position: relative，子容器设置了position: absolute, 后，如果父级容器中出现了滚动条，那么子容器也会跟随着滚动。容器结构和样式如下所示(虚拟列表的结构)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
  .container {
    position: relative;
    overflow: auto;
    height: 200px;
  }

  .container-holder {
    height: 1000px;
  }

  .container-list {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
  }

  .container-list-item {
    height: 30px;
    line-height: 30px;
  }
</style>

<div class="container">
  <div class="container-holder"></div>
  <div class="container-list">
    <div class="container-list-item"></div>
  </div>
</div>

预期效果是子容器不随父容器一起滚动

解决方案

  1. 使用transform: translate3d(x ,y ,z)方法将定位元素移动到指定位置(虚拟列表的解决方案)

background 样式覆盖

1
2
3
4
div {
  background-image: url("...");
  background: #fff;
}

上述代码想同时设置background-image和background-color，但是结果是 color 会覆盖image，解决办法是将background改成background-color