开发中常用样式
# 开发中常用样式
# 水平垂直居中
- 使用 flex
.box {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
1
2
3
4
5
6
2
3
4
5
6
- 使用定位
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
1
2
3
4
5
6
2
3
4
5
6
# 文本溢出
# 单行文本溢出
.box {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
1
2
3
4
5
2
3
4
5
# 多行文本溢出
多行文本溢出显示不全的问题。
- 给该元素添加一个父盒子，父盒子设置固定高度撑起来
// 三行溢出
$line: 3;
.box {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 设置背景图片
.box {
width: 300px;
height: 200px;
background-image: url("http://clouds.guowei.link/blog/1.jpg");
background-size: 100% 100%;
}
1
2
3
4
5
6
2
3
4
5
6
# css 画三角形
# 三角朝上
// 三角形颜色
$color: red;
// 短边长度
$border: 10px;
.box {
width: 0;
height: 0;
border-left: $border solid transparent;
border-right: $border solid transparent;
border-bottom: $border * 2 solid $color;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 三角朝下
// 三角形颜色
$color: red;
// 短边长度
$border: 10px;
.box {
width: 0;
height: 0;
border-left: $border solid transparent;
border-right: $border solid transparent;
border-top: $border * 2 solid $color;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 三角朝左
// 三角形颜色
$color: red;
// 短边长度
$border: 10px;
.box {
width: 0;
height: 0;
border-top: $border solid transparent;
border-right: $border * 2 solid $color;
border-bottom: $border solid transparent;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 三角朝右
// 三角形颜色
$color: red;
// 短边长度
$border: 10px;
.box {
width: 0;
height: 0;
border-top: $border solid transparent;
border-left: $border * 2 solid $color;
border-bottom: $border solid transparent;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 左上
// 三角形颜色
$color: red;
// 短边长度
$border: 10px;
.box {
width: 0;
height: 0;
border-top: $border solid $color;
border-right: $border solid transparent;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 右上
// 三角形颜色
$color: red;
// 短边长度
$border: 10px;
.box {
width: 0;
height: 0;
border-top: $border solid $color;
border-left: $border solid transparent;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 左下
// 三角形颜色
$color: red;
// 短边长度
$border: 10px;
.box {
width: 0;
height: 0;
border-bottom: $border solid $color;
border-right: $border solid transparent;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 右下
// 三角形颜色
$color: red;
// 短边长度
$border: 10px;
.box {
width: 0;
height: 0;
border-bottom: $border solid $color;
border-left: $border solid transparent;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 设置下划线
.box {
text-decoration: underline;
}
1
2
3
2
3
# 强制开启 GPU 渲染
.box {
-webkit-transform: translateZ(0px);
}
1
2
3
2
3
# 滚动条
# 隐藏滚动条
::-webkit-scrollbar {
display: none;
}
1
2
3
2
3
# 自定义滚动条样式
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #fff;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: hsla(220, 4%, 58%, 0.5);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 点击穿透
- 点击可以穿透现有属性，穿透到下面。
// 元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的
.box {
pointer-events: none; // auto | none
}
1
2
3
4
2
3
4