网站前端的一些记录

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{
}