【6.0】前端基础之CSS终章#

【一】浮动带来的影响及解决办法#

【1】父标签塌陷#

造成父标签塌陷的问题

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        body {
8
            margin: 0;
9
        }
10

11
        #d1 {
12
            border: 3px solid red;
13
        }
14

15
        #d2 {
16
            width: 100px;
17
            height: 100px;
18
            background-color: blue;
19
            float: left;
20
        }
21

22
        #d3 {
23
            width: 100px;
24
            height: 100px;
25
            background-color: yellow;
26
            float: left;
27

28
        }
29

30

31
    </style>
32
</head>
33
<body>
34
<div id="d1">
35
    <div id="d2"></div>
36
    <div id="d3"></div>
37
</div>
38
</body>
39
</html>

内部元素因为浮动导致了外边框无法框柱内部元素

【2】解决办法一#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        body {
8
            margin: 0;
9
        }
10

11
        #d1 {
12
            border: 3px solid red;
13
        }
14

15
        #d2 {
16
            width: 100px;
17
            height: 100px;
18
            background-color: blue;
19
            float: left;
20
        }
21

22
        #d3 {
23
            width: 100px;
24
            height: 100px;
25
            background-color: yellow;
26
            float: left;
27

28
        }
29

30
        #d4 {
31
            height: 100px;
32
        }
33

34

35
    </style>
36
</head>
37
<body>
38
<div id="d1">
39
    <div id="d2"></div>
40
    <div id="d3"></div>
41
    <div id="d4"></div>
42
</div>
43
</body>
44
</html>

内部再创建一个子标签，给一个固定高度，撑起外边框

造成代码冗余，不推荐

【2】解决办法二#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        body {
8
            margin: 0;
9
        }
10

11
        #d1 {
12
            border: 3px solid red;
13
        }
14

15
        #d2 {
16
            width: 100px;
17
            height: 100px;
18
            background-color: blue;
19
            float: left;
20
        }
21

22
        #d3 {
23
            width: 100px;
24
            height: 100px;
25
            background-color: yellow;
26
            float: left;
27

28
        }
29

30
        #d4 {
31
            /*height: 100px;*/
32
            clear: left; /* 该标签的左边(地面和空中)不能有浮动元素 */
33
            clear: both; /* 该标签的左右两边(地面和空中)不能有浮动元素 */
34
        }
35

36

37
    </style>
38
</head>
39
<body>
40
<div id="d1">
41
    <div id="d2"></div>
42
    <div id="d3"></div>
43
    <div id="d4"></div>
44
</div>
45
</body>
46
</html>

【3】通用的解决办法#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        body {
8
            margin: 0;
9
        }
10

11
        #d1 {
12
            border: 3px solid red;
13
        }
14

15
        #d2 {
16
            width: 100px;
17
            height: 100px;
18
            background-color: blue;
19
            float: left;
20
        }
21

22
        #d3 {
23
            width: 100px;
24
            height: 100px;
25
            background-color: yellow;
26
            float: left;
27

28
        }
29

30
        #d4 {
31
            /*height: 100px;*/
32
            /*clear: left; !* 该标签的左边(地面和空中)不能有浮动元素 *!*/
33
            clear: both; /* 该标签的左右两边(地面和空中)不能有浮动元素 */
34
        }
35

36
        .clearfix:after {
37
            content:"";
38
            display: block;
39
            clear: both;
40
        }
41

42

43
    </style>
44
</head>
45
<body>
46
<div id="d1" class="clearfix">
47
    <div id="d2"></div>
48
    <div id="d3"></div>
49
    <div id="d4"></div>
50
</div>
51
</body>
52
</html>

在写HTML页面之前，提前写好处理浮动带来的影响的CSS代码
1
.clearfix:after {
2
            content:"";
3
            display: block;
4
            clear: both;
5
        }
之后只要出现了塌陷的问题就给该塌陷的标签加一个 clearfix 属性即可

【二】溢出属性#

【1】问题引入#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        #p1 {
8
            height: 100px;
9
            width: 100px;
10
            border: 5px solid red;
11
        }
12
    </style>
13
</head>
14
<body>
15
<p id="p1">
16
    起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。</p>
17
<p>起笔描绘山水意，</p>
18
<p>云淡风轻如诗情。</p>
19
<p>倾情抒写欢乐悲，</p>
20
<p>文字流露真我心。</p>
21
</body>
22
</html>

字数太多超出了，规定的边框限制

【2】解决办法#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        #p1 {
8
            height: 100px;
9
            width: 100px;
10
            border: 5px solid red;
11
            /* overflow: visable 默认是可见，溢出还是展示 */
12
            /*overflow: hidden; !* 溢出部分直接隐藏 *!*/
13
            /*overflow: scroll; !* 字体内容可以滚动 *!*/
14
            overflow: auto; /* 自动 */
15

16
        }
17
    </style>
18
</head>
19
<body>
20
<p id="p1">
21
    起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。</p>
22
<p>起笔描绘山水意，</p>
23
<p>云淡风轻如诗情。</p>
24
<p>倾情抒写欢乐悲，</p>
25
<p>文字流露真我心。</p>
26
</body>
27
</html>

【3】头像案例#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        body {
8
            margin: 0;
9
            background-color: #4e4e4e;
10
        }
11

12
        #d1 {
13
            height: 200px;
14
            width: 200px;
15
            border-radius: 50%;
16
            border: 3px solid white;
17
            margin: 0 auto;
18
            overflow: hidden;
19

20

21
        }
22

23
        #d1 > img {
24
            width: 100%;/* 占标签100%比例 */
25
        }
26

27
    </style>
28
</head>
29
<body>
30
<div id="d1">
31
    <img src="头像猫.jpg" alt="">
32
</div>
33
</body>
34
</html>

【三】定位#

【1】参考#

相对定位（Relative Positioning）
- 是一种CSS定位方式，它是相对于元素在正常文档流中的位置进行定位。
- 通过设置position: relative;属性，可以在元素自身正常显示的前提下
- 通过设定top、right、bottom和left属性，来将元素在水平和垂直方向上进行微调。
- 相对定位会影响元素原本在文档流中的位置，但不会影响其他元素的布局。
绝对定位（Absolute Positioning）
- 是一种CSS定位方式，它是相对于最近的非静态定位的父元素进行定位。
- 通过设置position: absolute;属性
- 可以使用top、right、bottom和left属性来精确地定位元素。
- 绝对定位会脱离文档流，不会占据原本的空间，且不会影响其他元素的布局，它常用于创建浮动效果或者覆盖其他元素。
固定定位（Fixed Positioning）
- 也是一种CSS定位方式，它会相对于浏览器窗口进行定位。
- 通过设置position: fixed;属性，可以在元素不随页面滚动而移动的情况下
- 使用top、right、bottom和left属性来进行定位。
- 固定定位的元素会一直保持在屏幕上的固定位置，不会受到页面滚动的影响。这种定位常用于创建导航栏或悬浮广告等效果。
静态
- 所有的标签默认都是静态的 static，无法改变位置
相对定位
- 相对于标签原来的位置移动 relative
绝对定位(常用)
- 相对于已经定位过的父标签做移动，如果没有父标签那么就以body为父标签
- 当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位
固定定位(常用)
- 相对于浏览器窗口固定在某个位置

【2】相对定位#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        body {
8
            margin: 0;
9
        }
10

11
        #d1 {
12
            height: 100px;
13
            width: 100px;
14
            background-color: red;
15
            left: 50px; /* 相较于原来的位置从左向右移动50px 如果是负数，方向则相反*/
16
            top: 50px; /* 相较于原来的位置从上向下移动50px 如果是负数 方向则相反 */
17
            /*position: static; !* 默认是 static 无法修改位置 *!*/
18
            position: relative;
19
            /* relative ---> 相对定位 标签由 static 变成 relative
20
            他的性质就从原来没有定位的标签变成了已经定位过的标签
21
            即使没有移动，标签的性质也已经发生了改变
22
            */
23

24
        }
25

26

27
    </style>
28
</head>
29
<body>
30
<div id="d1">
31

32
</div>
33
</body>
34
</html>

【3】绝对定位#

当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        body {
8
            margin: 0;
9
        }
10

11
        #d3 {
12
            height: 100px;
13
            width: 200px;
14

15
            background-color: blue;
16
            position: relative; /* 从静态标签变为已经移动过的标签 */
17
        }
18

19
        #d4 {
20
            height: 200px;
21
            width: 400px;
22
            background-color: yellow;
23
            position: absolute; /* 绝对定位 */
24
            left: 220px;
25
            top: 110px;
26
        }
27

28

29
    </style>
30
</head>
31
<body>
32
<div id="d3">
33
    <div id="d4"></div>
34
</div>
35
</body>
36
</html>

【4】固定定位#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        #back {
8
            position: fixed; /* 写了fixed后，接下来的定位就是依据浏览器窗口 */
9
            bottom: 10px;
10
            right: 20px;
11
            height: 50px;
12
            width: 100px;
13
            background-color: burlywood;
14
            border: 1px solid black;
15
        }
16
    </style>
17
</head>
18
<body>
19

20
<div style="height: 500px;background-color: red"></div>
21
<div style="height: 500px;background-color: blue"></div>
22
<div style="height: 500px;background-color: orange"></div>
23
<div id="back">回到顶部</div>
24

25
</body>
26
</html>

【四】浮动和定位是否脱离文档流#

脱离文档流：发生移动后是否还会占有原来的位置

浮动
相对定位
绝对定位
固定定位

【1】不脱离文档流#

相对定位#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8

9
<div style="height: 200px;width: 300px; background-color: red;position: relative;left: 500px;"></div>
10
<div style="height: 200px;width: 300px; background-color: green"></div>
11

12
</body>
13
</html>

【2】脱离文档流#

浮动#

绝对定位#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8

9
<div style="height: 200px;width: 300px; background-color: red;"></div>
10
<div style="height: 200px;width: 300px; background-color: green;position:absolute;left: 500px;"></div>
11
    /* 没有父标签定位，则默认以body作为父标签 */
12
<div style="height: 200px;width: 300px; background-color: blue;"></div>
13

14
</body>
15
</html>

固定定位#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8

9
<div style="height: 200px;width: 300px; background-color: red;"></div>
10
<div style="height: 200px;width: 300px; background-color: green;position:fixed;bottom:20px;right: 30px;"></div>
11
<div style="height: 200px;width: 300px; background-color: blue;"></div>
12

13
</body>
14
</html>

【五】z-index模态框#

百度登录页面，其实是三层
最底部是正常的内容(a=0) - 最远的
接着是黑色的透明区(a=99) - 中间的
最后是白色的登陆注册区(a=100) - 最远的

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        body {
8
            margin: 0;
9
        }
10

11
        .cover {
12
            position: fixed;
13
            left: 0;
14
            right: 0;
15
            top: 0;
16
            bottom: 0;
17
            background-color: rgba(0, 0, 0, 0.4);
18
            z-index: 99;
19

20
        }
21

22
        .modal {
23
            background-color: white;
24
            height: 400px;
25
            width: 600px;
26
            position: fixed;
27
            left: 50%;
28
            top: 50%;
29
            z-index: 100;
30
            margin-left: -200px;
31
            margin-top: -300px;
32
        }
33

34

35
    </style>
36
</head>
37
<body>
38

39
<div>最底层的显示内容</div>
40
<div class="cover">中间的透明层</div>
41
<div class="modal">
42
    注册登录层
43
    <h1>注册登陆页面</h1>
44
    <p>username
45
        <input type="text">
46
    </p>
47

48
    <p>password
49
        <input type="password">
50
    </p>
51

52
    <p>点我提交
53
        <input type="submit">
54
    </p>
55

56

57
</div>
58

59
</body>
60
</html>

【六】透明度opacity#

不单单可以修改颜色的透明度还可以修改字体的透明度

rgba 只能修改颜色的透明度
opacity 不只是能修改颜色还能修改字体的透明度

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        #p1 {
8
            background-color: rgba(255, 255, 255, 0.4);
9
        }
10

11
        #p2 {
12
            background-color: rgb(255, 255, 255);
13
            opacity: 0.5;
14
        }
15

16
    </style>
17
</head>
18
<body>
19
<p id="p1">001</p>
20
<p id="p2">002</p>
21
</body>
22
</html>

音乐

音乐

【6.0】前端基础之CSS终章#

【一】浮动带来的影响及解决办法#

【1】父标签塌陷#

【2】解决办法一#

【2】解决办法二#

【3】通用的解决办法#

【二】溢出属性#

【1】问题引入#

【2】解决办法#

【3】头像案例#

【三】定位#

【1】参考#

【2】相对定位#

【3】绝对定位#

【4】固定定位#

【四】浮动和定位是否脱离文档流#

【1】不脱离文档流#

相对定位#

【2】脱离文档流#

浮动#

绝对定位#

固定定位#

【五】z-index模态框#

【六】透明度opacity#

支持与分享

音乐

CSS 终章

【6.0】前端基础之CSS终章#

【一】浮动带来的影响及解决办法#

【1】父标签塌陷#

【2】解决办法一#

【2】解决办法二#

【3】通用的解决办法#

【二】溢出属性#

【1】问题引入#

【2】解决办法#

【3】头像案例#

【三】定位#

【1】参考#

【2】相对定位#

【3】绝对定位#

【4】固定定位#

【四】浮动和定位是否脱离文档流#

【1】不脱离文档流#

相对定位#

【2】脱离文档流#

浮动#

绝对定位#

固定定位#

【五】z-index模态框#

【六】透明度opacity#

支持与分享