CH03-CSS盒子模型
本章目标
- 掌握盒子边框（重点）
- 掌握盒子外边距（重点、难点）
- 掌握盒子内边距（重点、难点）
- 掌握盒子圆角（重点）
- 掌握盒子显示方式（重点、难点）
一、盒子边框
1.1盒子边框
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dv {
width: 200px;
height: 200px;
border-left: 5px solid red;
border-top: 5px dashed orange;
border-right: 5px double green;
border-bottom: 5px dotted skyblue;
}
</style>
</head>
<body>
<div class="dv"></div>
</body>
</html>
|
代码演示效果：
二、外边距
2.1外边距属性
- margin：外边距
- margin-top: 上边距;
- margin-right: 右边距;
- margin-bottom: 下边距;
- margin-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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dv1{
width: 200px;
height: 200px;
margin-bottom: 10px;
border: 1px solid red;
}
.dv2{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
</body>
</html>
|
代码演示效果：
2.2使用外边距让盒子居中对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
}
.container{
width: 1190px;
height: 300px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
|
代码演示效果：
三、内边距
3.1内边距属性
- padding：内边距
- padding-top: 上边距;
- padding-right: 右边距;
- padding-bottom: 下边距;
- padding-left: 左边距;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dv{
width: 100px;
height: 100px;
padding: 10px 30px;
background-color: pink;
}
</style>
</head>
<body>
<div class="dv"></div>
</body>
</html>
|
代码演示效果：
小技巧：清除内外边距，网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除下网页元素的内外边距。
1
2
3
4
5
| /* *代表所有 */
*{
margin：0；
padding：0；
}
|
四 、圆角边框
4.1圆角边框属性
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
width: 100px;
height: 100px;
display: inline-block;
background-color: pink;
}
.span1 {
border-radius: 100px 0 0 0;
}
.span2 {
border-radius: 0 100px 0 0;
}
.span3 {
border-radius: 0 0 100px 0;
}
.span4 {
border-radius: 0 0 0 100px;
}
.circle {
border-radius: 50%;
}
</style>
</head>
<body>
<span class="span1"></span>
<span class="span2"></span>
<br/>
<span class="span4"></span>
<span class="span3"></span>
<br/>
<span class="circle"></span>
</body>
</html>
|
代码演示效果：
4.2定义计算元素的总宽度和总高度
4.3盒子阴影
box-shadow：设置盒子阴影
举例：box-shadow：水平位移 垂直位移 模糊距离 阴影距离 阴影颜色 ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dv{
width: 200px;
height: 200px;
box-shadow: 5px 5px 5px 5px #ccc;
}
</style>
</head>
<body>
<div class="dv"></div>
</body>
</html>
|
代码演示效果：
五、盒子显示方式
5.1盒子显示属性
- display：设置盒子显示属性
- none：隐藏盒子
- inline：行级元素
- block：块级元素
- inline-block：内联块级元素
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
display: block;
width: 200px;
height: 200px;
border: 1px solid red;
}
.dv{
display: inline-block;
width: 200px;
height: 200px;
}
.dv2{
display: none;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<span></span>
<div class="dv1"></div>
<div class="dv2"></div>
</body>
</html>
|
代码演示效果：
课后作业
练习1：广创科技课程导航
练习2：聚美优品商品分类
练习3：聚美优品美容产品热点
练习4：制作商品图片列表
练习5：彩妆热卖产品列表
练习6：中心动态列表页面
练习7：商品分类页面
练习8：学员免费体验登录页面
练习9：制作爱奇异视频播放列表
练习10：粉丝排行榜
练习11：二级导航栏
