网站前端的一些记录

发表于 | 评论数：
本文字数： 3.3k | 阅读时长 ≈ 3 分钟

CSS

postion(定位)

static(默认)

没有任何定位。top, bottom, left, right z-index 无效。

relative(相对定位)

相对于它当前位置再进行定位。

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
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<style type="text/css">
			body {
				margin: 0px;
			}
			
			#p1 {
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: relative;
				left: 100px;
				top: 50px;
			}
			
			#h1 {
				color: crimson;
				position: relative;
				left: 20px;
				top: 30px;
			}
		</style>
	</head>
	<body>
		<div id="p1">
		</div>
		<h1> 1</h1>
		<h1 id="h1">2</h1>
		<h1> 3</h1>
	</body>
</html>

absolute(相对父元素绝对定位)

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
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<style type="text/css">
			body {
				margin: 0px;
			}
			
			#p1 {
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: relative;
				left: 100px;
				top: 50px;
			}
			
			#h1 {
				color: crimson;
				position: absolute;
				left: 20px;
				top: 30px;
			}
		</style>
	</head>
	<body>
		<div id="p1">
			<h1 id="h1">2</h1>
		</div>
		<h1> 1</h1>
		<h1> 3</h1>
	</body>
</html>

fixed(浏览器窗口绝对定位)

相对于浏览器窗口进行定位。不管如何滚动都固定位置。

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
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<style type="text/css">
			body {
				margin: 0px;
			}
			
			#p1 {
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: relative;
				left: 100px;
				top: 50px;
			}
			
			#h1 {
				color: crimson;
				position: fixed;
				left: 20px;
				top: 30px;
			}
		</style>
	</head>
	<body>
		<div id="p1">
		</div>
		<h1> 1</h1>
		<h1 id="h1">2</h1>
		<h1> 3</h1>
	</body>
</html>

float(浮动)

并存有效性：static(默认)和 relative(相对定位)。
假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行。

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
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<style type="text/css">
			body {
				margin: 0px;
			}
			
			#p1 {
				right: 50px;
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: relative;
				float: left;
			}
			#h1 {
				color: crimson;
				float: left;
			}
			#h2 {
				color: crimson;
				clear: both;
			}
			#h3 {
				
				color: crimson;
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="p1">
		</div>
		<h1 id="h1"> 1</h1>
		<h1 id="h2">2</h1>
		<h1 id="h3"> 3</h1>
	</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
34
//class选择器 可以结合元素选择器
.class{
}
//id选择器
#id{
}
//元素选择器
p{
}
h1,h2{
}
//通配符
*{
}
//属性选择器
[href]{
}
[href="www.cc.cc"]{
}
//部分匹配
[href~="www.c"]{
}
//后代选择器
p strong{
}
.class .class2{
}
//子元素选择器 必须一层一层
p>strong{
}
//相邻兄弟选择器可紧接下一个元素的后的元素，二者须有相同父元素
h1+p{
}