定位

相对定位（Relative Positioning）

  • 优点：相对定位不会脱离文档流，元素在页面中的位置仍然占据原先的空间，并且可以通过设置 top、right、bottom、left 属性来进行微调位置。
  • 缺点：相对定位对其他元素的定位影响较小，无法实现脱离文档流的效果。
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相对定位</title>
	<style type="text/css">
		.con{
			width:400px;
			height:400px;
			border:1px solid #000;
			margin:100px auto 0;
		}

		.con div{
			width:200px;
			height:100px;
			margin:20px;
			background-color:gold;
			text-align:center;
			line-height:100px;
			font-size:40px;

		}

		body .box01{
			position:relative;
			left:50px;
			top:50px;
			background-color:green;
		}


	</style>
</head>
<body>
	<div class="con">
		<div class="box01">1</div>
		<div class="box02">2</div>
		<div class="box03">3</div>
	</div>
</body>
</html>

绝对定位（Relative Positioning）

  • 优点：绝对定位可以脱离文档流，相对于最近的具有定位属性（非 static）的父元素或者根据文档进行定位，可以精确控制元素的位置。
  • 缺点：如果没有合适的参考对象或设置不当，可能导致布局混乱，需要谨慎使用。
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位</title>
	<style type="text/css">
		.con{
			width:400px;
			height:400px;
			border:1px solid #000;
			margin:100px auto 0;
			position:relative;
		}

		.con div{
			width:200px;
			height:100px;
			margin:20px;
			background-color:gold;
			text-align:center;
			line-height:100px;
			font-size:40px;

		}

		body .box01{
			position:absolute;
			left:-60px;
			top:-60px;
			background-color:green;
		}


	</style>
</head>
<body>
	<div class="con">
		<div class="box01">1</div>
		<div class="box02">2</div>
		<div class="box03">3</div>
	</div>
</body>
</html>

固定定位（Fixed Positioning）

  • 优点：固定定位会相对于浏览器窗口进行定位，即使页面滚动时也会保持在固定位置，常用于创建固定的导航栏或工具条。
  • 缺点：在移动设备上可能存在兼容性问题，因为固定定位的元素会固定在屏幕上不动。
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定定位</title>
	<style type="text/css">
		.con{
			width:400px;
			height:400px;
			border:1px solid #000;
			margin:100px auto 0;
			position:relative;
			
		}

		.con div{
			width:200px;
			height:100px;
			margin:20px;
			background-color:gold;
			text-align:center;
			line-height:100px;
			font-size:40px;

		}

		body .box01{
			position:fixed;
			/* left:0; */
			right:0;
			/* top:0; */
			bottom:0;

			
			background-color:green;
		}

		
		.box4{
			background-color:pink;
			position:absolute;
			left:100px;
			top:100px;
		}


	</style>
</head>
<body>
	<div class="con">
		<div class="box01">1</div>
		<div class="box02">2</div>
		<div class="box03">3</div>
	</div>

	<div class="box4">第四个盒子</div>
</body>
</html>

元素层级

元素的层级关系指的是元素在页面上的覆盖顺序。通过设置 z-index 属性，可以控制元素在层级上的表现，使得某些元素可以覆盖其他元素或者位于其他元素之下，合理设置元素的层级关系可以让页面呈现出更加丰富的效果。

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素层级</title>
	<style type="text/css">
		.con{
			width:400px;
			height:400px;
			border:1px solid #000;
			margin:100px auto 0;
			position:relative;
			
		}

		.con div{
			width:200px;
			height:100px;
			margin:20px;
			background-color:gold;
			text-align:center;
			line-height:100px;
			font-size:40px;
			
			position:absolute;


		}

		body .box01{			
			background-color:green;
			z-index:10;
		}

		body .box02{
			background-color:pink;			
			left:30px;
			top:30px;
		}

		body .box03{			
			left:60px;
			top:60px;
			z-index:11;
		}


		


	</style>
</head>
<body>
	<div class="con">
		<div class="box01">1</div>
		<div class="box02">2</div>
		<div class="box03">3</div>
	</div>

</body>
</html>

CSS 背景

背景 (background-image)

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景</title>
	<style type="text/css">
		
		.box{
			width:320px;
			height:160px;
			border:5px solid #000;
			margin-bottom:50px;
			background-color:gold;
			background-image:url(images/bg.jpg);
			font-size:40px;
			color:red;
		}

		.box2{
			width:320px;
			height:160px;
			border:5px solid #000;
			margin-bottom:50px;
			background-color:gold;
			font-size:40px;
			color:red;
		}


		.box3{

			width:320px;
			height:160px;
			border:5px solid #000;
			margin-bottom:50px;

			/* background-color:gold;
			background-image:url(images/bg.jpg); */
			/* 
				repeat:重复平铺;
				repeat-x：横向重复平铺
				repeat-y：纵向重复平铺
				no-repeat:不重复;

			 */
			/* background-repeat:no-repeat; */
			/* background-position:center; */

			/* background-position:-20px -20px; */

			background:url(images/bg.jpg) -20px -20px gold no-repeat;
		}

		.box4{
			width:100px;
			height:100px;
			border:5px solid #000;
			/* background-image:url(images/location_bg.jpg);
			background-repeat:no-repeat;
			background-position:-110px -150px; */

			background:url(images/location_bg.jpg) -110px -150px no-repeat;
		}


	</style>
</head>
<body>
	<div class="box">背景图片</div>
	<div class="box2"><img src="images/bg.jpg">背景图片</div>
	<div class="box3"></div>

	<div class="box4">
		
	</div>
</body>
</html>

背景滚动 (background-attachment)

  • background-attachment: scroll;: 这是默认值，背景图片会随着元素内容滚动，即整个页面滚动时，背景图片也会随之滚动。
  • background-attachment: 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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景滚动</title>
	<style type="text/css">
		
		body{
			background:url(images/location_bg.jpg);
			height:1000px;
			background-attachment:fixed;
		}

	</style>
</head>
<body>
	<p>
		实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
	</p>
	<p>
		实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
	</p>
</body>
</html>

css 权重

权重的计算规则如下：

  • 每个选择器都有一个特定的权重值，权重值由四个部分组成：行内样式（1000）、ID 选择器（100）、类选择器、伪类和属性选择器（10）、元素和伪元素选择器（1）。
  • 通配符（*）、关系选择器（+、>、~、’ ‘）和通用选择器（div、p、span 等）的权重值为 0。
  • 权重值越高的规则优先级越高，当多个规则的权重相同时，后定义的规则会覆前面的规则。

案例

布局案例 1 - hd+ft

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局实例</title>
	<style type="text/css">
		.pagenation{
			width:958px;
			height:40px;
			border:1px solid #000;
			margin:50px auto 0;
			font-size:0;
			text-align:center;

		}

		.pagenation a{
			display:inline-block;
			padding:5px 10px;
			background-color:gold;
			font-size:12px;
			font-family:'Microsoft Yahei';
			text-decoration:none;
			margin:8px 5px;
			color:#333;
		}

		.pagenation a:hover{
			background-color:red;
			color:#fff;
		}

		.pagenation span{
			display:inline-block;
			font-size:12px;
		}

		.menu{
			width:958px;
			height:40px;
			border:1px solid #000;
			margin:50px auto 0;
			padding:0;
			list-style:none;
			text-align:center;
			line-height:40px;
			font-size:0;
		}

		.menu li{
			display:inline-block;
			font-size:14px;
			
		}

		.menu .line{
			color:#333;
			margin:0 20px;
		}

		.menu li a{
			font-family:'Microsoft Yahei';
			color:#333;
			text-decoration:none;
		}

		.menu li a:hover{
			color:red;
		}


	</style>
</head>
<body>
	<ul class="menu">
		<li><a href="">首 页</a></li>
		<li class="line">|</li>
		<li><a href="">网站建设</a></li>
		<li class="line">|</li>
		<li><a href="">网站建设</a></li>
		<li class="line">|</li>
		<li><a href="">网站建设</a></li>
		<li class="line">|</li>
		<li><a href="">网站建设</a></li>
		<li class="line">|</li>
		<li><a href="">网站建设</a></li>
		<li class="line">|</li>
		<li><a href="">网站建设</a></li>
	</ul>

	<div class="pagenation">
		<a href="">上一页</a>
		<a href="">1</a>
		<a href="">2</a>
		<a href="">3</a>
		<a href="">4</a>
		<span>...</span>
		<a href="">17</a>
		<a href="">18</a>
		<a href="">19</a>
		<a href="">20</a>
		<a href="">下一页</a>
	</div>

	

</body>
</html>

布局案例 2 - nav

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局实例</title>
	<style type="text/css">
		.menu{
			list-style:none;
			background-color:#55a8ea;
			padding:0;
			width:960px;
			height:40px;
			margin:50px auto 0;
			position:relative;
		}

		.menu li{
			float:left;
			width:100px;
			height:40px;
			text-align:center;
			line-height:40px; 

		}

		.menu li a{
			/* font-size:14px;
			font-family:'Microsoft Yahei';
			color:#fff; */

			font:14px/40px 'Microsoft Yahei';
			color:#fff;
			text-decoration:none;

		}

		.menu li:hover{
			background-color:#00619f;
		}

		.menu .active{
			background-color:#00619f;
		}

		.menu .new{
			width:33px;
			height:20px;
			background:url(images/new.png) no-repeat;
			position:absolute;
			left:433px;
			top:-9px;
		}

		.menu .new:hover{
			background:url(images/new.png) no-repeat;
		}


	</style>
</head>
<body>
	<ul class="menu">
		<li><a href="">首 页</a></li>
		<li class="active"><a href="">网站建设</a></li>
		<li><a href="">网站建设</a></li>
		<li><a href="">网站建设</a></li>
		<li><a href="">网站建设</a></li>
		<li><a href="">网站建设</a></li>
		<li><a href="">网站建设</a></li>
		<li class="new"></li>
	</ul>
</body>
</html>

布局案例 3

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>特征布局</title>
	<style type="text/css">
		.news_list_con{
			width:600px;
			height:290px;
			border:1px solid #ddd;
			margin:50px auto 0;
			overflow:hidden;

		}

		.news_list_con h3{
			width:560px;
			height:50px;
			border-bottom:1px solid #ddd;
			margin:0px auto;
		}

		.news_list_con h3 span{
			float:left;
			height:50px;
			border-bottom:2px solid red;
			font:18px/50px 'Microsoft Yahei';
			color:#000;
			padding:0 15px;
			position:relative;
		}

		.news_list_con h3 a{
			float:right;
			font:14px/14px 'Microsoft Yahei';
			color:#666;
			text-decoration:none;
			margin-top:25px;
		}

		.news_list_con h3 a:hover{
			color:red;
		}

		.news_list_con ul{
			list-style:none;
			padding:0;
			width:560px;
			height:238px;
			margin:7px auto 0;
		}

		.news_list_con ul li{
			height:38px;
			border-bottom:1px solid #ddd;
			background:url(images/dot.gif) left center no-repeat;		
		}

		.news_list_con ul a{
			float:left;
			height:38px;			
			font:14px/38px 'Microsoft Yahei';
			text-decoration:none;
			color:#000;
			text-indent:30px;
			background: url(images/icon.jpg) 5px center no-repeat;
		}

		.news_list_con ul a:hover{
			color:red;
		}



		.news_list_con ul span{
			float:right;
			height:38px;			
			font:14px/38px 'Microsoft Yahei';
			color:#000;
		}


	</style>
</head>
<body>
	<div class="news_list_con">
		<h3><span>新闻列表</span><a href="#">更多&gt;&gt;</a></h3>
		<ul>
			<li><a href="">特征布局：新闻列表所需知识点：盒模型、浮动</a><span>2016-11-25</span></li>
			<li><a href="">特征布局：新闻列表所需知识点：盒模型、浮动</a><span>2016-11-25</span></li>
			<li><a href="">特征布局：新闻列表所需知识点：盒模型、浮动</a><span>2016-11-25</span></li>
			<li><a href="">特征布局：新闻列表所需知识点：盒模型、浮动</a><span>2016-11-25</span></li>
			<li><a href="">特征布局：新闻列表所需知识点：盒模型、浮动</a><span>2016-11-25</span></li>
			<li><a href="">特征布局：新闻列表所需知识点：盒模型、浮动</a><span>2016-11-25</span></li>
		</ul>

	</div>
</body>
</html>

布局案例 4

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局复习</title>
	<style type="text/css">
		body,ul,li,h3,h4{
			margin:0;
			padding:0;
		}

		ul{
			list-style:none;
		}


		.goods_list_con{
			width:498px;
			height:343px;
			border:1px solid red;
			margin:50px auto 0;
		}


		.goods_list_con h3{
			width:436px;
			height:20px;
			font:20px/20px 'Microsoft Yahei';
			color:#000;
			margin:30px auto 0;
			border-left:4px solid red;
			text-indent:15px;
		}

		.pic{
			width:212px;
			height:239px;
			background-color:pink;
			float:left;
			margin:17px 0 0 29px;
		}

		.goods_list{
			width:211px;
			height:239px;
		
			float:right;
			margin:17px 29px 0 0;
		}


		.pic_list{
			width:105px;
			height:142px;
			float:left;

		}

		.pic_list .picshow{
			display:block;
			width:70px;
			height:90px;
			background-color:green;
			margin:0 auto;
		}

		.pic_list h4{
			font:16px/40px 'Microsoft Yahei';
			color:#000;
			text-align:center;
		}

		.goods_list ul{
			width:211px;
			height:97px;
		
			float:left;
		}

		.goods_list ul li{
			width:104px;
			height:47px;
			border:1px dashed #ddd;
			float:left;
			margin-right:-1px;
			margin-bottom:-1px;
			text-align:center;
		}

		.goods_list ul li a{
			display:inline-block;
			width:104px;
			height:47px;
			text-decoration:none;
			font:14px/47px 'Microsoft Yahei';
			color:#000;
		}

		.goods_list ul li a:hover{
			background:pink;
			color:red;

		}
	</style>
</head>
<body>
	<div class="goods_list_con">
		<h3>淘宝女装</h3>
		<div class="pic"></div>
		<div class="goods_list">
			<div class="pic_list">
				<a href="#" class="picshow"></a>
				<h4>时尚包包</h4>
			</div>
			<div class="pic_list">
				<a href="#" class="picshow"></a>
				<h4>潮流美鞋</h4>
			</div>
			<ul>
				<li><a href="">新品上市</a></li>
				<li><a href="">女装</a></li>
				<li><a href="">欧美风</a></li>
				<li><a href="">美搭</a></li>
			</ul>

		</div>
	</div>
</body>
</html>