-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss.txt
283 lines (165 loc) · 3.92 KB
/
css.txt
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
（1）禁止文字被鼠标选中
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
（2）纯CSS让子元素突破父元素的宽度限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#box1 {
width: 500px;
height: 200px;
border: 2px solid blue;
padding: 10px;
}
#box2 {
white-space: nowrap;
display: inline-block;
}
#box3 {
width: 300px;
height: 200px;
background-color: blueviolet;
display: inline-block;
vertical-align: middle;
}
#box4 {
width: 400px;
height: 200px;
background-color: black;
display: inline-block;
vertical-align: middle;
}
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
<div id="box4"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#box1 {
width: 500px;
height: 200px;
border: 2px solid blue;
padding: 10px;
}
#box2 {
white-space: nowrap;
display: inline-flex;
}
#box3 {
width: 300px;
height: 200px;
background-color: blueviolet;
vertical-align: middle;
}
#box4 {
width: 400px;
height: 200px;
background-color: black;
vertical-align: middle;
}
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
<div id="box4"></div>
</div>
</div>
</body>
</html>
（3）css3新单位vw、vh、vmin、vmax的使用详解 ------- https://blog.csdn.net/ZNYSYS520/article/details/76053961
（4）:nth-child(an + b) 的使用方式
使用公式 (an + b)。描述：a表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
例：p:nth-child(3n + 2) { color:red } ------ 表示以3(a)个p标签为一个周期，将每个周期中的第2（b）个p标签的字体设置为红色
（5）table的两个重要属性
border-spacing: 0; ------ 设置单元格之间的空隙
border-collapse:collapse; ------ 合并单元格边框
（6）css3 loading 动画
http://www.17sucai.com/pins/demo-show?id=12579
（7）保证图片在父容器中不出现滚动条不变形，前提是父容器需指定高度或者通过定位获取高度，
例如.parent{ position: absolute; top:0;right:0;bottom:0;left:0 }
.img {
max-width: 100%;
max-height: 100%
}
（8）滚动条颜色
::-webkit-scrollbar {
width: 5px; //指垂直滚动条的宽度
height: 5px; //指水平滚动条的高度
}
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #b3d0ee;
}
（9） background 的 linear-gradient 和 radial-gradient 不支持animation以及transition
（10）css三角形（加border-radius:50%可以形成半圆）
上三角形
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid black;
下三角形
width：0；
height：0；
border-left：50px solid transparent；
border-right:50px solid transparent;
border-top:100px solid black;
左三角形
width：0；
height：0；
border-top：50px solid transparent；
border-bottom:50px solid transparent;
border-right:100px solid black;
右三角形
width：0；
height：0；
border-top：50px solid transparent；
border-bottom:50px solid transparent;
border-left:100px solid black;
左上三角形
width：0；
height：0；
border-top：100px solid black；
border-right:100px solid transparent;
右上三角形
width：0；
height：0；
border-top：100px solid black；
border-left：100px solid transparent；
左下三角形
width：0；
height：0；
border-bottom：100px solid black；
border-right：100px solid transparent；
右下三角形
width：0；
height：0；
border-bottom：100px solid black；
border-left：100px solid transparent；