CSS 单位

em 根据父元素的字体大小变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
body{
font-size: 14px;
}
div{
font-size: 1.2em;
}
</style>
<body>
<div class="test">
Test
</div>
</body>

rem 根据根元素的字体大小变化。

1
2
3
4
5
6
7
8
<style>
body{
font-size: 14px;
}
div{
font-size: 1.2rem;
}
</style>

vw 显示窗口的宽度
vh 显示窗口的高度
vmin 和 vmax 宽度和高度的最大值或最小值有关(如果宽度为1100px高度为700px 那么 1vmin 是 7px,1vmax 是 11px 反之亦然。)

1
2
3
4
5
6
<style>
body{
width: 100vw;
height: 100vh;
}
</style>

ex和ch单位 这两个单位只也依赖于font-family,因为它们被定为基于特殊字体的法案。


相关资料
CSS的一些单位,如rem、px、em、vw、vh、vm
七个你可能不了解的CSS单位

CSS 布局及技巧

布局

奇技

吸顶

1
2
3
4
5
.sticky-wrapper {
   position: sticky;
   top0;
   z-index99;
}

加载骨架屏

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/*
* Variables
*/
:root {
--card-padding: 24px;
--card-height: 340px;
--card-skeleton: linear-gradient(lightgrey var(--card-height), transparent 0);
--avatar-size: 32px;
--avatar-position: var(--card-padding) var(--card-padding);
--avatar-skeleton: radial-gradient(circle 16px at center, white 99%, transparent 0
);
--title-height: 32px;
--title-width: 200px;
--title-position: var(--card-padding) 180px;
--title-skeleton: linear-gradient(white var(--title-height), transparent 0);
--desc-line-height: 16px;
--desc-line-skeleton: linear-gradient(white var(--desc-line-height), transparent 0);
--desc-line-1-width:230px;
--desc-line-1-position: var(--card-padding) 242px;
--desc-line-2-width:180px;
--desc-line-2-position: var(--card-padding) 265px;
--footer-height: 40px;
--footer-position: 0 calc(var(--card-height) - var(--footer-height));
--footer-skeleton: linear-gradient(white var(--footer-height), transparent 0);
--blur-width: 200px;
--blur-size: var(--blur-width) calc(var(--card-height) - var(--footer-height));
}

/*
* Card Skeleton for Loading
*/
.card {
width: 280px;
height: var(--card-height);
}
.card:empty::after {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 6px;
box-shadow: 0 10px 45px rgba(0, 0, 0, 0.1);
background-image: linear-gradient(90deg, rgba(211, 211, 211, 0) 0, rgba(211, 211, 211, 0.8) 50%, rgba(211, 211, 211, 0) 100%), var(--title-skeleton), var(--desc-line-skeleton), var(--desc-line-skeleton), var(--avatar-skeleton), var(--footer-skeleton), var(--card-skeleton);
background-size: var(--blur-size), var(--title-width) var(--title-height), var(--desc-line-1-width) var(--desc-line-height), var(--desc-line-2-width) var(--desc-line-height), var(--avatar-size) var(--avatar-size), 100% var(--footer-height), 100% 100%;
background-position: -200% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
background-repeat: no-repeat;
-webkit-animation: loading 1.5s infinite;
animation: loading 1.5s infinite;
}

@-webkit-keyframes loading {
to {
background-position: 350% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
}
}

@keyframes loading {
to {
background-position: 350% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
}
}
/*
* Demo Stuff
*/
body {
min-height: 100vh;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
}

利用 CSS 穿透覆盖默认样式

1
2
3
img {
pointer-events: none;
}

实现自定义原生 select 控件的样式

1
2
3
4
select {
/* 禁用原生的样式 */
-webkit-appearance: none;
}

文本溢出处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//单行
.single {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
//多行
.more {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
work-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //指定行数
}

开启弹性滚动

1
2
3
4
body {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

注意:Android 不支持原生的弹性滚动,但可以借助第三方库 iScroll 来实现。

一像素边框设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.folder li {
position: relative;
padding: 5px;
}
.folder li + li:before {
position: absolute;
top: -1px;
left: 0;
content: " ";
width: 100%;
height: 1px;
border-top: 1px solid #ccc;
-webkit-transform: scaleY(0.5);
}

兼容 IE 浏览器的透明度处理

1
2
3
4
5
6
.ui {
width: 100%;
height: 100%;
opacity: 0.4;
filter: Alpha(opacity=40); //兼容IE浏览器的处理
}

常用的全屏居中 CSS 函数

1
2
3
4
5
body {
height: 100vh;
text-align: center;
line-height: 100vh;
}

Flex 布局 justify-content space-around 时 单个左居中

1
2
3
4
.container:after {
content: "";
flex: auto;
}

固定定位滚动

1
2
3
4
.container{
position: fixed;
overflow:scroll
}

扩大可点击区域

利用伪元素和定位达到鼠标移到边缘时候出现手型且可点击

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.expand-range {
position: relative;
}
.expand-range:after {
content: '';
position: absolute;
top: -10px; right: -10px; bottom: -10px; left: -10px;
}

/* 推荐使用scss */
@mixin expand-range($top: -10px, $right: $top, $bottom: $top, $left: $right, $position: relative) {
position: $position;
&:after {
content: '';
position: absolute;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
}
//使用:.test { @include expand-range($top: -5px, $position: absolute) }

巧用层叠上下文

利用层叠上下文和 z-index: -1 特性实现伪元素覆盖背景同时又不会遮挡文字。
梯形、菱形、平行四边形

1
2
3
4
5
6
7
8
9
10
div:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: cyan;
}

边框内圆角

利用伪元素实现圆角矩形并叠加在父元素的背景之上文字之下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div {
position: relative;
z-index: 1;
height: 200px;
padding: 10px;
background: #333;
}

div::after {
content: '';
position: absolute;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
z-index: -1;
border-radius: 5px;
background: cyan;
}

自适应宽度

折角

切角

高度坍塌

1
2
3
4
5
6
7
8
.container{
display:block;
content:'';
height:0;
clear:both;
overflow:hidden;
visibility: hidden;
}

注意外边距折叠

只使用一个方向的 margin

更好的表格边框

1
2
/* 删除所有的双倍边框 */
border-collapse: collapse;

短横线命名

1
.footer-column-left {}

不要重复设置

1
2
3
4
/* font 会被继承 */
html {
font: normal 16px/1.4 sans-serif;
}

使用transform属性来创建动画

1
2
3
4
5
6
7
8
9
.ball {
left: 50px;
transition: 0.4s ease-out;
}

/* 建议 */
.ball.slide-out {
transform: translateX(450px);
}

使用AutoPrefixer达到更好的兼容性

autoprefixer

压缩CSS文件

Caniuse

检查使用的属性是否得到了广泛的支持

验证

Stylelint


相关资料
12 个实用的前端开发技巧总结
【CSS】470- 是时候开始用 CSS 自定义属性了
响应式布局新方案
20个让你效率更高的CSS代码技巧
深入理解CSS background-blend-mode的作用机制
一文梳理CSS必会知识点
收藏!40 个 CSS 布局技巧
【第2022期】不定宽溢出文本适配滚动
奇妙的 CSS MASK
【CSS】333- 使用CSS自定义属性做一个前端加载骨架
《CSS揭秘》实用技巧总结
工作中常用的css整理

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.