布局,兼容,动画
重点掌握: 布局,兼容,动画
# 1. 选择器
答:
# 常用
- 元素选择器(
div
) - 类选择器(
class="a"
,.a
) - ID选择器(
id="a"
,#a
) - 属性选择器(
img[alt]
) - 派生选择器(
>
、+
)
# 优先级
- !important,权值为10000;
- 内联样式,如 style="",权值为1000;
- ID选择器,如 #id="", 权值为 100;
- class |伪类 | 属性 选择器,如 .class | :hover,:link,:target | [type], 权值 10;
- 标签 | 伪元素 选择器,如 p | ::after, ::before, ::fist-inline, ::selection, 权值 1;
- 通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~),权值为0
# 2. link和@import有什么区别?
答:
- 属性:
- link是html提供的标签,不仅可以加载css文件,还能定义 RSS、rel 连接属性等
- @import是css中的语法规则
- 加载顺序:
- 页面打开时,link引用的css文件被加载
- @import引用的CSS等页面加载完后最后加载
- 兼容性:@import是css2. 1后提出的,而link是不存在兼容问题
- DOM控制性:js操作DOM,可以使用link改变样式,无法使用@import的方式使用样式。
- 性能:@import过多使用它会延长浏览器渲染页面的时间,但利于修改和扩展。
# 3. src和href的区别?
答:
href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。例如:
<link href="reset.css" rel=”stylesheet“ />
浏览器会识别该文档为css文档,并行下载该文档,并且不会停止对当前文档的处理。这也是建议使用link,而不采用@import加载css的原因。
src是source的缩写,src的内容是页面必不可少的一部分,是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有:img、script、iframe。例如
<script src="script.js"></script>
当浏览器解析到该元素时,会暂停浏览器的渲染,知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之,src用于替换当前元素;href用于在当前文档和引用资源之间建立联系。
# 4. 常用的布局有什么?
答:
- float浮动布局
- flex布局
- grid布局
- inline,block行内块级布局
- position定位布局
# 5. 为什么要初始化 CSS 样式?
答:
# 初始化原因
- 由于浏览器的差异,不同浏览器有对其标签的默认值是不同的
- 减少冗余代码,提高代码质量
# Normalize. css和reset. css区别
Normalize. css是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize. css是一种现代的、为HTML5准备的优质替代方案.
- Normalize. css 保护了有价值的默认值
- Normalize. css修复了浏览器的bug
- Normalize. css 不会让你的调试工具变的杂乱
- Normalize. css 是模块化的
- Normalize. css 拥有详细的文档
# 浏览器reset. css
html,
body,
div,
span,
applet,
object,
,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ol,
ul,
li {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
vertical-align: middle;
}
/* custom */
a {
outline: none;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
a:focus {
outline: none;
}
input:focus,
select:focus,
textarea:focus {
outline: -webkit-focus-ring-color auto 0;
}
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
# 移动端reset. css
/*
html5doctor.com Reset Stylesheet
v1.4.1
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
box-sizing: border-box;
}
body {
line-height: 1;
}
:focus {
outline: 1;
}
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
display: block;
}
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted #000;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
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
# 淘宝初始化样式
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
margin: 0;
padding: 0;
}
body,
button,
input,
select,
textarea {
font: 12px/1.5tahoma, arial, \5b8b\4f53;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
}
address,
cite,
dfn,
em,
var {
font-style: normal;
}
code,
kbd,
pre,
samp {
font-family: couriernew, courier, monospace;
}
small {
font-size: 12px;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
legend {
color: #000;
}
fieldset,
img {
border: 0;
}
button,
input,
select,
textarea {
font-size: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
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
# normalize. css
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
# 6. 块级和行内元素有哪些?区别?
答:
# 块级
- div
- ul,ol,li
- h1,h2,h3,h4,h5,h6
- p
- section,article,footer
属性 | 名称 |
---|---|
blockquote | 块引用 |
center | 举中对齐块 |
dir | 目录列表 |
div | 常用块级容易,也是CSS layout的主要标签 |
dl | 定义列表 |
fieldset | form控制组 |
form | 交互表单 |
h1 | 大标题 |
h2 | 副标题 |
h3 | 3级标题 |
h4 | 4级标题 |
h5 | 5级标题 |
h6 | 6级标题 |
hr | 水平分隔线 |
isindex | input prompt |
menu | 菜单列表 |
noframes | frames可选内容,(对于不支持frame的浏览器显示此区块内容) |
noscript | 可选脚本内容(对于不支持script的浏览器显示此内容) |
ol | 有序表单 |
p | 段落 |
pre | 格式化文本 |
table | 表格 |
ul | 无序列表 |
# 行内
- a
- span
- img
- input,label
- i,b,strong
属性 | 名称 |
---|---|
a | 链接 |
abbr | 缩写 |
acronym | 首字 |
b | 粗体(不推荐) |
bdo | bidi override |
big | 大字体 |
br | 换行 |
cite | 引用 |
code | 计算机代码(在引用源码的时候需要) |
dfn | 定义字段 |
em | 强调 |
font | 字体设定(不推荐) |
i | 斜体 |
img | 图片 |
input | 输入框 |
kbd | 定义键盘文本 |
label | 表格标签 |
q | 短引用 |
s | 中划线(不推荐) |
samp | 定义范例计算机代码 |
select | 项目选择 |
small | 小字体文本 |
span | 常用内联容器,定义文本内区块 |
strike | 中划线 |
strong | 粗体强调 |
sub | 下标 |
sup | 上标 |
textarea | 多行文本输入框 |
tt | 电传文本 |
u | 下划线 |
# 可变元素
根据上下文语境决定该元素为行内元素或者块级元素
属性 | 名称 |
---|---|
button | 按钮 |
del | 删除文本 |
iframe | inline frame |
ins | 插入的文本 |
map | 图片区块(map) |
object | object对象 |
script | 客户端脚本 |
# 区别:
- 行内元素与其他行内元素并排;块级霸占一行,不能与其他任何元素并列。
- 行内元素不能设置宽高,默认的宽度就是文字的宽度;块级能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。
# 7. 如何隐藏一个元素?有什么不同?
答:
opacity:0
或者使用filter:占据空间,可点击display:none
:不占空间,无法点击visible:hidden
:占空间,无法点击height:0;overflow:hidden
:占空间,无法点击布局移除页面
top:-999em
等: 使用relative占空间,absolute不占空间,都无法点击
# 8. 浮动布局
答:
浮动布局最早是为了文字环绕的场景而出现的,所以float元素被赋予了会脱离文档流的包裹特性。在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
# 清除浮动
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
/* 兼容 IE 低版本 */
}
2
3
4
5
6
7
8
9
10
11
12
# 9. 清除空格
答: 当我们控制行内元素当间距时,视觉上两个元素之间会出现空白。
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
2
3
4
5
元素的源码之间不要出现空白
<span>1</span><span>2</span><span>3</span>
增加float属性:
span{float:left}
父元素字体大小为0
div{font-size: 0}
在IE8中,如果给行块级元素设置了position:absolute,页面会直接就是全部空白了。
使用margin负值,一般为-4px,但数值会有误差
设置letter-spacing,一般为-6px
# 10. 什么是盒子模型?
答:
# 属性
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括四个属性:
- 外边距(margin)
- 边框(border)
- 内边距(padding)
- 实际内容(content)。
# box-sizing的值
- content-box(标准)
- border-box(IE)
- inherit:从父元素继承
标准盒模型下,增加margin、border或padding其中一项的宽度值,都会导致容器宽度的增加。而IE盒模型下, 增加border或padding其中一项的宽度值, 容器宽度不变。
# 计算方式
标准盒模型:
box-sizing:content-box
width = padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right + content宽度
IE盒模型:
box-sizing:border-box
width = content宽度
# 11. position 有哪些值?absolute/relative 是相对于谁定位的?
答:
- relative: 相对于页面html定位
- absolute: 相对父标签,父标签有relative/fixed
- fixed:相对于浏览器
- static:默认值
- inherit:继承父级
relative和absolute的区别:
- absolute 元素脱离了文档结构,会产生破坏性,导致父元素坍塌。
- absolute 元素具有“包裹性”,宽度刚好是内容的宽度。
- absolute 元素具有“跟随性”。多个元素absolute会重叠遮挡,多个relative会间隔开来。
# 12. 什么是 BFC?平时碰见了什么场景?
答:
概念: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。简而言之,BFC就是一种解决边距重叠和父容器坍塌的方案。
原理:
- BFC内部元素的元素在垂直方向上的边距会发生重叠
- BFC不会与浮动元素重叠
- BFC是独立的容器,不会影响里面的元素,里面的元素也不会影响外面元素
- 计算BFC元素高度时,浮动元素也会参与计算
产生条件:
- 根元素或包含根元素的元素
- 浮动元素:float不为none(
float+float具有包裹性和破坏性导致无法自适应,一般用在块状浮动布局
) - 绝对定位元素:position不为static或者relative(
absolute脱离文档流
) - overflow 值不为 visible 的块元素(
overflow可自适应,但由于溢出不可见限制了应用场景
) - 行内块元素:display为inline-block(
inline-block具有包裹性,无法自适应,IE8以下无法识别该属性
) - 表格单元格:元素的 display为 table-cell(HTML表格单元格默认为该值,
table-cell具有包裹性,无溢出特性,绝对宽度也能自适应
)
# 场景
- margin穿透问题,margin-top到父级失效:使父元素变为BFC,添加overflow:hidden的样式
- margin重叠问题,上个元素到margin-bottom和下个元素到margin-top取高值:给子元素再创建一个父元素,使父元素是BFC
.parent::before {
content: "";
display: table; //display:block;无效
}
2
3
4
- 两栏自适应,解决float文字环绕:使右侧元素为BFC,添加overflow:hidden的样式
- 清除浮动:使父元素变成BFC,添加清除浮动类
# 13. flex 布局中常用了哪些属性?
答:
# flex-basis
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
# flex-direction
flex-direction
: row | row-reverse | column | column-reverse;
决定主轴的方向
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
# flex-wrap
flex-wrap
: nowrap | wrap | wrap-reverse;
flex-wrap属性定义,如果一条轴线排不下,如何换行
- nowrap(默认):不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方
# justify-content
justify-content
: flex-start | flex-end | center | space-between | space-around;
定义了项目在主轴上的对齐方式
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
# align-items
align-items
: flex-start | flex-end | center | baseline | stretch;
属性定义项目在交叉轴上如何对齐。
- flex-start:交叉轴的起点对齐。
- flex-start:交叉轴的起点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
# align-self
align-self
: auto | flex-start | flex-end | center | baseline | stretch;
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
# order
order
:[integer];
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
# 14. flex: 1,flex:1 1 auto,flex:1 1 0 区别是什么?
答:
flex
的三个属性:
- flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
- flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
- flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
flex:1 =>flex: 1 1 0% flex:auto =>flex: 1 1 auto
flex:none =>flex: 0 0 auto
# 15. 水平居中
答:
- inline 元素用text-align: center;
.container {
text-align: center;
}
2
3
- block 元素不定宽,用margin: auto;
.container {
margin: auto;
}
2
3
- 绝对定位元素定宽,用left结合margin-left
.container {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
margin-left: -150px;
}
2
3
4
5
6
7
- 定宽元素,绝对定位结合margin
.container {
position: absolute;
width: 200px;
height: 100px;
left: 0;
right: 0;
margin: auto;
background: red;
}
2
3
4
5
6
7
8
9
- 兼容要求不高的不定宽元素,绝对定位结合transform
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
2
3
4
5
6
- flex
.container {
width: 200px;
height: 100px;
display: flex;
justify-content: center;
background: red;
}
.container {
width: 200px;
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
background: red;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 16. 垂直居中
答:
- 单行inline 元素,内部文字垂直居中,可设置line-height的值等于height值
.container {
height: 50px;
line-height: 50px;
}
2
3
4
- 单行inline-block 元素,使用vertical-align
.container {
display: inline-block;
vertical-align: middle;
}
2
3
4
- 绝对定位元素定高,用top结合margin-top = -(height/2)
.container {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
margin-top: -150px;
}
2
3
4
5
6
7
- 兼容要求不高的不定高元素,绝对定位结合transform
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
2
3
4
5
6
- 定高元素,绝对定位结合margin
.container {
position: absolute;
width: 200px;
height: 100px;
top: 0;
bottom: 0;
margin: auto;
background: red;
}
2
3
4
5
6
7
8
9
- 内部块垂直居中,使用table
<div class="container">
<div class="item"></div>
</div>
2
3
.container {
display: table;
width: 500px;
height: 200px;
}
.item {
display: table-cell;
vertical-align: middle;
}
2
3
4
5
6
7
8
9
10
- flex,单行/多行,内部块/文字,垂直居中。(多行块保持一定距离)
<div class="container">
qietuniu
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
</div>
2
3
4
5
6
7
.container {
width: 200px;
height: 100px;
display: flex;
align-items: center;
background: red;
}
.container {
width: 200px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
background: red;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- flex,多行内部块垂直居中(多块合在一起没间隙)
.container {
width: 200px;
height: 100px;
display: flex;
flex-wrap: wrap;
align-content: center;
background: red;
}
2
3
4
5
6
7
8
# 17. rem 是什么?如何计算的?
猜猜猜
# 18. 实现双飞翼布局
答:
双飞翼和圣杯布局都是为了解决两侧宽度固定,中间宽度自适应的三栏布局。 双飞翼布局更优的原因是:
- 兼容到ie6
- 主要内容优先加载
三栏全部浮动,中间的 div嵌套div,利用 margin左右边距进行布局调整。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style type="text/css">
.left,
.main,
.right {
float: left;
min-height: 130px;
text-align: center;
}
.left {
margin-left: -100%;
background: green;
width: 200px;
}
.right {
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
.content {
margin: 0 300px 0 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
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
# 19. 实现圣杯布局
答: 三栏全部浮动,左右两栏加上负margin让其跟中间栏div并排
<!DOCTYPE html>
<html lang="en">
<head>
<title>圣杯布局</title>
<meta charset="UTF-8" />
<style>
.container {
padding: 0 100px 0 200px;
}
.left {
width: 200px;
background: red;
margin-left: -100%;
left: -200px;
}
.right {
width: 100px;
background: blue;
margin-left: -100px;
right: -100px;
}
.main {
background: yellow;
width: 100%;
}
.left,
.main,
.right {
float: left;
min-height: 200px;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
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
# 20. 如何实现单行... 多行...
答:
# 单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
2
3
# 多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
2
3
4
# 21. 设计一个modal背景层
<div class="dialog"> content </div>
<div class="modal"> </div>
2
.model {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .5;
background: #000;
}
.dialog {
position: relative;
margin: 20px auto;
width: 400px
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 22. 什么是伪类?什么是伪元素?使用场景?
答:
伪类:
比如a标签的四个状态, hover
, active
, visited
, linked
等,表示交互状态
伪元素:
::before
, ::after
等不是真的dom元素,但是可以当成dom元素使用
场景:
伪元素 after
可以用在清除浮动等。
# 23. css Hack
答:
- 只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
2
3
- 只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
2
3
- 只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
2
3
- 只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
2
3
- 非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
2
3
- “-″减号是IE6专有的hack
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
- “\9\0″ 只对IE9/IE10生效,是IE9/10的hack
# 24. 如何实现三角形?
答:
边框选择一边有颜色,另外三边透明
.triangle {
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid blue;
}
2
3
4
5
6
7
8
# 25. 解决移动端 1px?
答:
通过 transform
属性
.border-1px(@color) {
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid @color;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 26. 响应式的解决方案
答:
- media媒体查询
- width:100%等百分比
- 使用rem,vh,vw
# 27. 项目主题是如何做的?
答: less等通过定义变量,使用变量,让颜色,字体大小等统一
# 28. 项目中用什么 CSS 方案?为什么?
答: less,scss,sass
# 29. css动画
答:
# animation
- animation-name: 动画名称
- animation-duration: 动画时长
- animation-timing-function:规定动画的速度曲线。默认是ease
- animation-delay:规定动画何时开始。默认是 0
- animation-iteration-count:规定动画被播放的次数。默认是 1
- animation-direction:规定动画是否在下一周期逆向地播放。默认是normal
- animation-play-state :规定动画是否正在运行或暂停。默认是running
- animation-fill-mode:规定动画执行之前和之后如何给动画的目标应用,默认是none,保留在最后一帧可以用forwards
.container {
width: 100px;
height: 50px;
position: absolute;
animation-name: changeAnimation;
animation-duration: 5s;
}
@keyframes changeAnimation {
0% {
background: red;
left: 0;
top: 0;
}
25% {
background: yellow;
left: 200px;
top: 0;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0;
top: 200px;
}
100% {
background: red;
left: 0;
top: 0;
}
}
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
# transition
<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>
- transition-property: 过渡属性(默认值为all)
- transition-duration: 过渡持续时间(默认值为0s)
- transiton-timing-function: 过渡函数(默认值为ease函数)
- transition-delay: 过渡延迟时间(默认值为0s)
过度时间函数:
- ease: 开始和结束慢,中间快。相当于cubic-bezier(0. 25, 0. 1, 0. 25, 1)
- linear: 匀速。相当于cubic-bezier(0, 0, 1, 1)
- ease-in: 开始慢。相当于cubic-bezier(0. 42, 0, 1, 1)
- ease-out: 结束慢。相当于cubic-bezier(0, 0, 0. 58, 1)
- ease-in-out: 和ease类似,但比ease幅度大。相当于cubic-bezier(0. 42, 0, 0. 58, 1)
- step-start: 直接位于结束处。相当于steps(1, start)
- step-end: 位于开始处经过时间间隔后结束。相当于steps(1, end)
.container {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: red;
transition: all .5s linear;
}
.container:hover {
width: 300px;
height: 300px;
}
2
3
4
5
6
7
8
9
10
11
12
# animation和transition的区别
- transition需要触发一个事件, 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果;
- transition 是过渡,是样式值的变化的过程,只有开始和结束;animation 其实也叫关键帧,通过和 keyframe 结合可以设置中间帧的一个状态;
- animation 可以设置很多的属性,比如循环次数,动画结束的状态等等,transition 只能触发一次;
# 两面切换
<div class="parent">
<div class="front">
</div>
<div class="back">
</div>
</div>
2
3
4
5
6
7
8
.parent {
perspective: 400px;
border: 1px solid #333;
width: 200px;
height: 300px;
padding: 10px;
}
.parent>div {
width: 200px;
height: 300px;
background-size: cover;
backface-visibility: hidden;
position: absolute;
}
.front {
z-index: 100;
background: url("images/01.png");
animation: front 3s infinite;
}
.back {
background: url("images/02.png");
animation: back 3s infinite;
}
@keyframes front {
0% {
transform: rotateY(0)
}
50% {
transform: rotateY(180deg)
}
100% {
transform: rotateY(360deg)
}
}
@keyframes back {
0% {
transform: rotateY(-180deg)
}
50% {
transform: rotateY(0deg)
}
100% {
transform: rotateY(180deg)
}
}
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
# 3D透视旋转
<div class="parent">
<img src="shuaige.jpg" alt="">
</div>
2
3
.parent {
width: 420px;
height: 420px;
border: 1px solid #ccc;
padding: 10px;
perspective: 300PX;
}
img {
width: 400px;
animation: rotate 4s infinite //旋转 4s 无限
}
@keyframes rotate {
from {
transform: rotateZ(0deg)
}
to {
transform: rotateZ(360deg)
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 30. 优雅降级和渐进增强
答:
优雅降级认为,应该真对那些最高级,最完善的浏览器来设计网站。 渐渐增强认为,刚应该关注内容本身
# 31. 阴影
答:
# 文字阴影
- text-shadow:
none|h-shadow v-shadow blur color
; 宽偏移 高偏移 模糊度 颜色 - 阴影不占位置,不占总体空间
- text-shadow可设置多个 如:
text-shadow:2px 3px 4 #333,-2px -3px 4 red;
# 盒子阴影
box-shadow: inset 2px 2px 2px 1px rgba(0, 0, 0, 0. 2);
inset |offset-x | offset-y | blur-radius | spread-radius | color
内阴影|y偏移|x偏移|模糊度|展开度/扩散度, 影响阴影宽度|颜色
box-shadow: 60px -16px teal;
box-shadow: 10px 5px 5px black;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 5em 1em gold;
box-shadow: 3px 3px red,
-1em 0 0.4em olive;
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
2
3
4
5
6
7
8
9
10
# 32. px, em, rem
答:
px, 像素,绝对单位。是相对于显示器分辨路来说的
em, 是相对长度,是相对于当前对象内文本的字体尺寸,如果当前对象内字体的大小没有没设置,将会以浏览器的默认字体为准。它会继承夫级元素的字体大小,因此不是一个固定的值
rem, 是css3新增的一个相对单位(root em ,跟 em),使用rem为元素设置字体大小时,仍然是相对大小,但相对的是html跟元素。
rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响。rem 单位可以从浏览器字体设置中继承字体大小。
# 33. 雪碧图
答: