# css备忘
# 1. 超出省略和换行显示
强制不换行
p {
white-space: nowrap;
}
1
2
3
2
3
自动换行
p {
word-wrap: break-word;
}
1
2
3
2
3
强制英文单词断行
p {
word-break: break-all;
}
1
2
3
2
3
注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。
超出显示省略号
p {
text-overflow: ellipsis;
overflow: hidden;
}
1
2
3
4
2
3
4
显示n行，多余n行省略号表示
overflow: hidden
text-overflow: ellipsis
display: -webkit-box
-webkit-line-clamp: n
-webkit-box-orient: vertical
1
2
3
4
5
2
3
4
5
# 2. CSS规范：
2.1 CSS声明按照一定的逻辑顺序来书写
- 如果包含了 content属性，则应该最优先书写，即写到声明块的最上面。
- 定位相关的属性，比如position、top、left、z-index、display、float、visibility和overflow、flex等。
- 布局相关的属性，比如display、float、visibility、overflow、flex和clear等。
- 盒模型相关的属性，比如width、height、margin、padding、border以及box-sizing等。
- 文本排版印刷相关的属性，比如font、line-height、vertical-align、text-align和white-space、text-decoration等。
- 视觉感官上相关的属性，比如color、background、list-style、transform、transition和animation等。
每写一种类型应该换行，且加个注释
.box {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Layout */
display: block;
float: right;
/* Box-model */
width: 100px;
height: 100px;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* Visual */
color: #333;
background-color: #f5f5f5;
}
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
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
2.2 其他规范
- 尽量不要使用 !important
(如果真的需要提高某个选择器的优先级，可以通过增加样式的层级来达到这个目的。)
/* Not recommended */
.heavy { font-weight: 700 !important; }
/* Recommended */
.heavy p,
.heavy a { font-weight: 700; }
1
2
3
4
5
6
2
3
4
5
6
- 属性值为0的时候，不要带单位。
/* Not recommended */
.info-item { padding: 0px 10px; }
/* Recommended */
.info-item { padding: 0 10px; }
1
2
3
4
5
2
3
4
5
- 当可能的时候尽量使用三位的十六进制计数法，比如表示颜色的时候。
/* Not recommended */
.pink-color { color: #ff33aa; }
/* Recommended */
.pink-color { color: #f3a; }
1
2
3
4
5
2
3
4
5
- font-weight使用数值化表示方法，用400代替 normal、700代替 bold。
/* Not recommended */
.heavy { font-weight: bold; }
/* Recommended */
.heavy { font-weight: 700; }
1
2
3
4
5
2
3
4
5
- line-height尽量不要带单位，除非必须用px来标定。
/* Not recommended */
.content p { line-height: 1.2em; }
/* Recommended */
.content p { line-height: 1.2; }
1
2
3
4
5
2
3
4
5
- 当属性值是介于0到1之间的小数时，可以直接把0省略。
/* Not recommended */
.pannel { opacity: 0.8; }
/* Recommended */
.pannel { opacity: .8; }
1
2
3
4
5
2
3
4
5