CSS-Cheatsheet
文章目录

文本

文本超出长度显示省略号

1
2
3
4
5
6
7
8
9
/* CSS */

.overflow {
width: 220px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

Layout

Flex 实现上中下结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#wrapper {
width: 400PX;
display: flex;
min-height: 100vh;
flex-direction: column;
}

#content {
flex: 1;
}

#footer {
height: 100px;
background-color: black;
}

如果排列的元素比较多, 还可以这样设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 无论如何要先把外面这一个 设置成 竖向排列 */
#wrapper {
width: 400PX;
display: flex;
min-height: 100vh;
flex-direction: column;
}

#header {
flex: 1;
}

#menu {
/* 这个地方设置一个非常大的值, 令它自动控制高度 */
flex: 100;
}

footer {
flex: 1;

}