这是从牛客网上总结下来的css面试基础题的一小部分，后续也会持续更新

markdown源文件下载
提取码：8min

1、css盒模型

盒模型有两种，一种是w3c提出的标准盒模型，一种是ie盒模型。

box-sizing:content-box为w3c提出的标准盒模型型，其宽度为border+padding+width，因此设置了内边距和边框会使得盒模型的宽度增加。

box-sizing:border-box为ie的盒模型，其宽度就为width，当设置了padding或者border时，会使得内容部分减小。

另外，如果为padding-box，则width为padding+width

2、link和@import区别

link是html标签不存在兼容性，页面被加载时，link也会被加载，而@import 引用的css会等到页面加载结束后在加载，且有兼容性，只有ie5以上才能被识别出来。link权重大于import

3、transition和animation区别

transition是渐变需要有事件被触发，animation为动画，任何时候都可以执行，且transition为两帧，即from{}to{} animation则可以根据需求写出所需要的关键帧。

4、flex布局

弹性布局，为盒模型提供最大的灵活。传统布局需要定位或者浮动非常不方便。

flex布局的属性：

flex布局具有两条轴，主轴和交叉轴，两者是垂直的

flex-direction： row | row-reverse | column | column-reverse 这个定义了主轴的方向，水平或者是垂直

换行规则：

flex-wrap： nowrap | wrap | wrap-reverse; wrap就是元素过多允许换行，nowrap则不允许

flex-grow：基于flex-basis，flex-basis就是每个元素所占的宽度，默认为auto，flex-grow则是在flex-basis的基础上对元素进行延展，比如盒模型内的每个元素都设置为flex-grow为1，那么每个元素都会占1/3，

flex-shrink:则是处理flex元素的缩放的，如果盒模型不足以放下所有元素，就可以用该属性进行缩放。

flex：是flex-grow，flex-shrink，和flex-basis的整合，默认为0，1，auto

justify-content：对齐方式，水平主轴对齐方式

align-items：对齐方式，竖直轴线方向

用flex实现水平垂直居中

1
2
3
4
5
6
7
8
.contain{
 	width:300px;
    height:300px;
    border:1px red solid;
    display:flex;
    justify-content:center;
    align-items:center;
}
1
2
3
<div class="contain">
	<img src="......">
</div>

5、BFC

格式化上下文，具有他自己的一套渲染规则，可以看作是一个被隔离的容器，里面的元素无论如何变化都不会影响到外面。

触发BFC特性的条件：

  • body标签

  • 浮动元素：float除none以外的值

  • 绝对定位元素：absolute或者是fixed

  • display为inline-block，table-cell，flex，table-caption，inline-flex

  • overflow除了visible以外的值（hidden、auto、scroll）

BFC特性：

  • 外边距折叠。

  • 清除浮动，浮动会影起父元素高度塌缩，解决方法就是触发父元素的BFC特性。

  • 防止非浮动元素被浮动元素所覆盖

6、习题：垂直居中的方法

方法一：父元素相对定位，子元素绝对定位并且上下左右都为0，margin：auto

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#a{
			position: relative;
			width: 300px;
			height: 300px;
			border: 1px black solid;
		}
		#b{
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			width: 100px;
			height: 100px;
			border: 1px red solid;
			position: absolute;
			margin: auto;
		}
	</style>
	<body>
		<div id="a">
			<div id="b">
				
			</div>
		</div>
	</body>
</html>

方法二:

负值

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#a{
			position: relative;
			width: 300px;
			height: 300px;
			border: 1px black solid;
		}
		#b{
			left: 50%;
			top: 50%;
			margin-left: -50px;
			margin-top: -50px;
			width: 100px;
			height: 100px;
			border: 1px red solid;
			position: absolute;
			
		}
	</style>
	<body>
		<div id="a">
			<div id="b">
				
			</div>
		</div>
	</body>
</html>

方法三:

flex

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#a{
		
			width: 300px;
			height: 300px;
			border: 1px black solid;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		#b{
			width: 100px;
			height: 100px;
			border: 1px red solid;
			
		}
	</style>
	<body>
		<div id="a"><div id="b"></div></div>
	</body>
</html>

方法四：

视窗

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
	
		.aa{
			width: 100px;
			height: 100px;
			background-color: aqua;
			margin: 50vh auto  0;
			 transform: translateY(-50%); 
		}
	</style>
	<body>
		<div id="a" class="aa">
		
		
		</div>
		
	</body>
</html>

7、块元素和行元素

块元素独占一行能设置宽高和边距，会自动填充整个父元素

内元素：不会独占一行，且宽高都无效，垂直方向的padding和margin都会失效。

8、双边距折叠

多个普通文档流里的块元素的垂直方向的margin会折叠。

都是整数时，取最大的

都是负数时，取绝对值最大的

一正一负则取和。

1
2
3
4
5
6
7
8
9
10
11
12
.a{	
	width:100px;
	height:100px;
	border:1px red solid;
	margin-bottom:10px
}
.b{
	width:100px;
	height:100px;
	border:1px red solid;
	margin-top:30px
}

上述示例最终结果是两个块级元素会相差30px

9、定位

fixed：相对于浏览器窗口定位，与文档流无关。

absolute：绝对定位，相对于最近的非static定位的父元素定位，脱离文档流。

relative：相对定位，将出现在所在的位置上，可以通过改变上下左右他的位置，他是不脱离文档流的，仍旧占据原来的空间。

sticky：粘性定位，top为阈值，视窗小于top之前都是相对定位，之后将会固定为top

粘性定位demo

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#a{
		
			width: 100px;
			height: 100px;
			border: 1px red solid;
			overflow: auto;
		}
		#b{
			width: 10px;
			height: 300px;
			border: 1px black solid;
			
		}
		#c{
			position: sticky;
			width: 5px;
			height: 5px;
			top: 30px;
			background-color: #000000;
			margin-top: 100px;
		}
	</style>
	<body>
		<div id="a" class="aa">
		<div id="b">
			<div id="c">
				
			</div>
		</div>
		</div>
		
	</body>
</html>

10、清除浮动

为什么要清楚浮动？

解决高度塌缩。

解决方法：

  • 在浮动元素后面给一个空元素并设置clear：both
  • 触发父元素的BFC特性，比如overflow设置为auto或者是hidden
  • 使用伪类，给父元素添加一个after并设置content为空，clear：both，display：block

11、画一条0.5px的线

使用scale（）进行缩放