十天学前端(二)

2.10 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两个情况：

(1) 相邻块元素垂直外边距的合并(兄弟级)

(2) 嵌套块元素垂直外边距的塌陷(父子级)

1相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则它们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qGNk3B2C-1656257029299)(Typora_image/113.png)]

执行代码：

<!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>
        /*1. 先构造两个盒子 */
        .one,
        .two {
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        /* 2.让第一张图产生100px的底侧外边距 */
        .one {
            margin-bottom: 100px;
        }

        /* 3.让第二张图产生200px的顶侧外边距 */
        .two {
            margin-top: 200px;
        }

        /* 此时两个盒子却相距200px,不是300px */
        /* 这种现象叫做外边距合并现象，以两个取值中较大的为准 */
    </style>
</head>

<body>
    <div class="one">第一张图</div>
    <div class="two">第二张图</div>
</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
35
36
37
38

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A2dSEDvl-1656257029301)(Typora_image/106.png)]

解决办法：

尽量只给一个盒子添加margin值。

2嵌套块元素垂直外边距的塌陷

<!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>嵌套块元素合并问题</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: rgb(48, 152, 238);
            /*1. 让父元素往下移动50px */
            margin-top: 50px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: rgb(245, 61, 153);
            /* 2.再让孩子往下移动100px  */
            margin-top: 100px;
            /* 此时父元素跟着下面，这个称为父元素的塌陷问题 */
            /* 此时谁移动的多，就用谁的取值作为塌陷值 */
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</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
35
36

效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QwRWthmV-1656257029301)(Typora_image/107.png)]

对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D1bNGscN-1656257029303)(Typora_image/112.png)]

解决方案：

(1) 可以为父元素定义上边框

(2) 可以为父元素定义上内边距

(3) 可以为父元素添加overflow:hidden.

还有其他方法，比如浮动，固定，绝对定位的盒子不会有塌陷的问题，后期总结

执行代码：

<!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>嵌套块元素合并问题</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: rgb(48, 152, 238);
            /*1. 让父元素往下移动50px */
            margin-top: 50px;
            /* 解决方案1，给父元素定义上边框 */
            /* border: 1px solid purple; */
            /* border: 1px solid transparent */
            /* transparent表示透明 */
            /* 解决方案2，给父元素定义上内边距 */
            /* padding: 1px; */
            overflow: hidden;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: rgb(245, 61, 153);
            /* 2.再让孩子往下移动100px  */
            margin-top: 100px;
            /* 此时父元素跟着下面，这个称为父元素的塌陷问题 */
            /* 此时谁移动的多，就用谁的取值作为塌陷值 */
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</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
35
36
37
38
39
40
41
42
43

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJ2lDXlu-1656257029307)(Typora_image/108.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mnlSgCX2-1656257029308)(Typora_image/109.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K2r0IRP6-1656257029311)(Typora_image/110.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BbYszyNr-1656257029312)(Typora_image/111.png)]

2.11 清除内外边距

网页元素很多都嗲有默认的内外边距，而且不同浏览器默认的也不一定。因此我们在布局前，首先要清除下网页元素的内外边距

* {
    padding: 0;   /* 清除内边距*/
    margin: 0;   /* 清除外边距 */
}
1
2
3
4

注意：

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级元素和行内块元素就可以了。

执行代码：

<!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>清除内外边距</title>
    <style>
        /* 清除内外边距 这也是css的第一行代码 */
        * {
            margin: 0;
            padding: 0;
        }

        span {
            background-color: rgb(27, 189, 67);
            /* 此时左右有效果，上下没有 */
            margin: 20px;
        }
    </style>
</head>

<body>
    123
    <ul>
        <li>有些标签本身就自带内外边距</li>
    </ul>
    <span>行内元素尽量只设置左右的内外边距</span>
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tWHeWad5-1656257029315)(Typora_image/114.png)]

2.PS的基本操作

因为网页美工大部分效果图都是利用ps(Photoshop)来做的，所以我们一行大部分切图工作都是在PS里面完成的。

(1) 文件–>打开：可以打开我们要测量的图片

(2) Ctrl+R: 可以打开标尺，或者视图–>标尺

(3) 右击标尺，把里面的单位改为像素

(4) Ctrl + 加号(+) 可以放大视图，Ctrl+减号(-)可以缩小视图。

(5) 按住空格键，鼠标可以变成小手，拖动PS视图。

(6) 用选区拖动，可以测量大小

(7)Ctrl + D 可以取消选区，或者在旁边空白处点击一下也可以取消选取。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LR1lM5EX-1656257029317)(Typora_image/115.png)]

综合案例1：产品模块布局

(图片只是样例)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9tKx2A1z-1656257029320)(Typora_image/116.png)]

执行代码：

<!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>综合案例-产品模型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 让块级盒子水平居中对齐 */
            margin: 100px auto;
        }

        .box img {
            /* 图片宽度跟盒子大小一样宽 */
            width: 100%;
            height: 200px;

        }

        .review {
            height: 70px;
            font-size: 14px;
            /* 给个padding值，因为没有width属性，所以padding不会撑开盒子的宽度 */
            padding: 0 28px;
            /* 因为这个盒子有高度height属性，如果设置padding-top时会撑大盒子，所以用margin-top */
            margin-top: 30px;
        }

        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }

        .info {
            font-size: 14px;
            /* 盒子与盒子之间的距离，最好用margin */
            margin-top: 15px;
            padding: 0 13px;
        }

        .info h4 {
            /* 把h4块元素变为行内块元素 */
            display: inline-block;
            /* 让文字不加粗 */
            font-weight: 400;
        }

        /* .info h4 a {
            color: #000;
            text-decoration: none;
        } */
        a {
            /* 超链接去下划线并改变颜色 */
            color: #000;
            text-decoration: none;
        }

        .info span {
            color: #ff6677;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 3px 0 3px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../access/horse.jpg" alt="这是一张图片" title="这是一匹马">
        <!-- 快捷键p.review -->
        <p class="review">此马非凡马，房星本是星。向前敲瘦骨，犹自带铜声。</p>
        <p class="appraise">来自于唐代李贺的评价</p>
        <div class="info">
            <h4><a href="#">在白云间欢腾，天地一切一览无余</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </div>
</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
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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2dYkjNcb-1656257029321)(Typora_image/117.png)]

总结：

(1)标签都是有语义的，合理的地方用合理的标签，比如产品标题用h,大量文字段落就用p

(2) 类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期更容易维护。

(3)margin和padding大部分情况都是可以混用的，但是根据实际情况，总有更简单的方法实现

(4)多运用辅助工具，比如屏幕画笔，ps等。

综合案例2:快报模板

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bTzFbqP-1656257029323)(Typora_image/118.png)]

执行代码：

<!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>新闻快报模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            /* 去掉页面中所有li前面的小圆点 */
            list-style: none;
        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            /* 把盒子移动到画面中央,让左右都为auto就可以了 */
            margin: 100px auto;
        }

        .box h3 {
            height: 32px;
            /* 点线dotted */
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            /* 取消加粗 */
            font-weight: 400;
            /* 让表头文字垂直居中，口诀就是行高等于盒子的高度 */
            line-height: 32px;
            /* 让文字水平居中用下面的代码 */
            /* text-align: center; */
            padding-left: 15px;
        }

        .box ul li a:hover {
            /* 鼠标经过的时候，链接下面出现下划线 */
            text-decoration: underline;
        }

        .box ul li a {
            font-size: 12px;
            color: #666;
            /* 去掉超链接下划线 */
            text-decoration: none;
        }

        .box ul li {
            height: 23px;
            /* 垂直居中 */
            line-height: 23px;
            /* 因为li没有指定宽度，所以不会撑开盒子 */
            padding-left: 20px;
        }

        .box ul {
            margin-top: 7px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <!-- 快捷键ul>li*5>a -->
        <ul>
            <!-- 按照shift+alt+鼠标左键，可以一下选五个 -->
            <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>
        </ul>
    </div>
</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
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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3fNjBqyT-1656257029325)(Typora_image/119.png)]

3.圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了。

border-radius属性用于设置元素的外边框圆角。

语法：

border-radius:length;
1

border	[ˈbɔːrdər]	边境; 边界; 边疆; 国界;
radius	[ˈreɪdiəs]	半径(长度); 桡骨; 周围;

radius半径(圆的半径)原理：(椭)圆与边框的交集形成圆形效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R3vEwgCj-1656257029327)(Typora_image/120.png)]

参数值可以为数值或百分比

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写50%

该属性是一个简写属性，其实后面可以跟四个值，分别代表左上角、右上角、右下角，左下角。

分开写分别是

border-top-left-radius	左上角
border-top-right-radius	右上角
border-bottom-right-radius	右下角
border-bottom-left-radius	左下角

执行代码：

<!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>圆角边距</title>
    <style>
        div {
            width: 300px;
            height: 280px;
            background-color: rgb(17, 180, 192);
            /* 把这个矩形盒子变成圆角 */
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div></div>
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-duB5KPle-1656257029329)(Typora_image/121.png)]

拓展：

执行代码：

<!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>圆形边框常用写法</title>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: rgb(167, 197, 34);
            /* 变成圆形  1.让它的半径等于这个正方形边长的一半 */
            /* border-radius: 100px; */
            /* 变成圆形   2.就是宽度和高度的一半，等价于100px */
            border-radius: 50%;
        }

        .juxing {
            width: 300px;
            height: 100px;
            background-color: rgb(190, 30, 182);
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            background-color: rgb(250, 8, 8);
            border-radius: 10px 20px 30px 40px;
            display: inline-block;
        }

        .test {
            width: 200px;

            height: 200px;
            background-color: rgb(200, 233, 14);
            /* 两个数值的对角线的关系 */
            border-radius: 10px 40px;
            display: inline-block;
        }

        .test_test {
            width: 200px;
            height: 200px;
            background-color: rgb(26, 206, 230);
            /* 设三个值，分别是左上，右上左下，右下 */
            border-radius: 10px 30px 50px;
            display: inline-block;
        }

        .single {
            width: 200px;
            height: 200px;
            background-color: rgb(247, 243, 197);
            /* 只让左上角显示20px */
            border-top-left-radius: 20px;
        }
    </style>
</head>

<body>
    1.圆形的做法
    <div class="yuanxing"></div>
    2.圆形矩形的做法
    <div class="juxing">radius后面跟一个值</div>
    3.可以设置不同的圆角
    <div class="radius">radius后面跟四个值</div>
    <div class="test">radius后面跟两个值</div>
    <div class="test_test">后面跟三个数值</div><br>
    4.可以单个角设置
    <div class="single">单个角设置</div>
</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
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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XtyI54UV-1656257029332)(Typora_image/122.png)]

4.盒子阴影

CSS中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影效果。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;
1

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊距离 (影子的虚实)
spread	可选。阴影的尺寸
color	可选。阴影的颜色。请参阅CSS颜色值。
inset	可选。将外部阴影(outset)改为内部阴影。

注意：

(1) 默认的是外阴影(outside),但是不可以写这个单词，否则导致阴影效果无效

(2) 盒子阴影不占用空间，不会影响其他盒子排列。

执行代码：

<!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>盒子阴影</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: rgb(26, 151, 182);
            /* 让盒子上下100px，居中显示 */
            margin: 100px auto;
            /* 水平阴影 垂直阴影  模糊距离  阴影尺寸  阴影颜色 */
            /* box-shadow: 10px 10px 10px 10px black; */
            /* 将阴影调整为半透明色 */
            /* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3); */
            /* 默认外阴影，不可以写outside,写上不起效果。    可以改为内阴影 */
            /* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .4) inset; */
            /* 也可以只设置水平阴影和垂直阴影 其他都是默认值 */
            /* box-shadow: 10px 10px; */
        }

        /* 原先盒子没有影子，当我们鼠标经过盒子就添加阴影效果 */
        div:hover {
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .4);
        }
    </style>
</head>

<body>
    <div></div>
</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
35
36
37

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TtfjnHzv-1656257029333)(Typora_image/123.png)]

5.文字阴影

在CSS中，我们可以使用text-shadow属性将阴影应用于文本。

语法：

text-shadow: h-shadow v-shadow blur color;
1

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离
color	可选。阴影的颜色。参阅CSS颜色值。

执行代码：

<!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>文字阴影</title>
    <style>
        div {
            width: 400px;
            font-size: 35px;
            color: orange;
            /* 正常值是400，加粗是700 */
            font-weight: 700;
            /* 添加文字阴影 */
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .4);
            /* 用外边距实现居中显示 用下面代码没实现，有待研究 */
            /* 发现问题：盒子必须要指定宽度，才可以实现居中 */
            margin: auto;

        }
    </style>
</head>

<body>
    <div>脚踏实地，仰望星空</div>
</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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QwePzUEt-1656257029334)(Typora_image/124.png)]

1.CSS浮动

场景：整个网页的布局

为什么需要浮动
浮动的排列特性
3种最常见的布局方式
为什么需要清除浮动
写出至少2种清除浮动的方法
利用Photoshop实现基本的切图
利用photoshop插件实现切图
完成学成在线案例

1.1 传统网页布局的三种方式

网页布局的本质----用CSS来摆放盒子。把盒子摆放到相应的位置。

CSS提供了三种传统布局方式(简单说，就是盒子如何进行排列顺序)：

(1) 普通流(标准流)

(2) 浮动

(3) 定位

1.1.2标准流(普通流/文档流)

所谓的标准流：就是标签按照规定好的默认方式排列。

(1) 块级元素会独占一行，从上向下顺序排列。

常用元素：div(盒子)、hr(创建一条水平线)、p(段落)、h1~h6、ul(无序列表)、dl(定义列表)、form(定义表单)、table(定义表格)

(2) 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

常用元素：span(盒子)、a(定义超链接)、i(倾斜)、em(倾斜)等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eYk8TqqN-1656257029335)(Typora_image/125.png)]

以上都是标准流布局。我们前面学习的就是标准流，标准流是最基本的布局方式。

这三种(标准流，浮动，定位)布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：在实际开发中，一个页面基本都包含了这三种布局方式(后面移动端学习新的布局方式)

1.2.3为什么需要浮动？

1.如何让多个块级盒子(div)水平排列成一行？

执行代码：

<!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>行内块中间有缝隙</title>
    <style>
        /* 清除网页样式 */
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: rgb(14, 238, 238);
            /* 如果用行内块实现块级元素在一行显示的效果 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EASfDGIa-1656257029335)(Typora_image/126.png)]

比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。

2.如何实现两个盒子的左右对齐？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-maVi8QOA-1656257029337)(Typora_image/127.png)]

总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

上列代码，

添加浮动，

float: left;
1

效果展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TgMP7y1u-1656257029338)(Typora_image/128.png)]

网页布局的第一准则：

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

1.1.4浮动(float)

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法:

选择器 { float: 属性值；}
1

属性值	描述
none	元素不浮动(默认值)
left	元素向左浮动
right	元素向右浮动

执行代码：

<!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>
        /* 操作1 */
        .left,
        .right {
            /* 给两个盒子添加左浮动 */
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(219, 15, 209);
        }

        /* 操作2 */
        .right {
            /* 给这个盒子添加右浮动  样式冲突，遵循的原则是就近原则(离结构的距离)*/
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">需要放在左上角的盒子</div>
    <div class="right">需要放在右上角的盒子</div>
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UHfuCKWz-1656257029339)(Typora_image/129.png)]

1.1.5 浮动的特性(重难点)

加了浮动之后的元素，会具有很多特性，需要我们掌握的

1.浮动元素会脱离标准流(脱标)
2.浮动的元素会一行内显示并且元素顶部对齐
3.浮动的元素会具有行内块元素的特性

1.设置了浮动(float)的元素最重要的特性：

(1).脱离标准普通流的控制(浮)移动到指定位置(动)，(俗称脱标)

(2).浮动的盒子不再保留原先的位置

执行代码：

<!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>浮动特性：脱标</title>
    <style>
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(0, 247, 255);
        }

        .box2 {
            /* width: 220px; */
            width: 300px;
            height: 400px;
            background-color: rgb(255, 94, 0)
        }
    </style>
</head>

<body>
    <!-- .box1{浮动的盒子} -->
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8J8zIWJZ-1656257029342)(Typora_image/130.png)]

2.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

执行代码：

<!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>浮动元素特性-浮动元素一行显示</title>
    <style>
        div {
            /* 都加一个左侧浮动  如果浏览器放的下，都在一行显示，如果浏览器放不下，会另起一行*/
            float: left;
            width: 200px;
            height: 200px;
        }

        .one {
            background-color: green;
        }

        .two {
            background-color: purple;
            height: 300px;
        }

        .three {
            background-color: yellow;
            height: 400px;
        }

        .four {
            background-color: red;
            height: 500px;
        }
    </style>
</head>

<body>
    <div class="one">第一个盒子</div>
    <div class="two">第二个盒子</div>
    <div class="three">第三个盒子</div>
    <div class="four">第四个盒子</div>
</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
35
36
37
38
39
40
41
42
43
44
45

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ix42YpHF-1656257029343)(Typora_image/131.png)]

注意：浮动的元素是互相贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y70p4hlN-1656257029344)(Typora_image/132.png)]

3.浮动元素会具有行内块元素特性。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

执行代码：

<!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>浮动元素具有行内块元素特点</title>
    <style>
        span,
        div {
            /* span是行内元素，不能设置宽高，设置上页面显示不出来 */
            /* 以前的做法是用display属性做个转化 */
            /* 现在在这里加一个浮动  span竟然可以xians */
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(200, 25, 206);
        }

        /* 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性 */
        /* 如果行内元素有了浮动，则不需要转换块级，或者是行内块级元素就可以直接给宽度和高度 */
        p {
            /* 1.不添加浮动显示 */
            /* 2.添加浮动显示 */
            float: right;
            height: 300px;
            background-color: rgb(247, 235, 66);
        }
    </style>
</head>

<body>
    <span>1.行内元素测试</span>
    <span>2.行内元素测试</span>
    <div>3.块元素测试</div>
    <p>p是块级元素</p>
</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
35
36
37
38
39
40

效果显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u9jW65dJ-1656257029346)(Typora_image/133.png)]

(1) 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容决定

(2)浮动的盒子中间是没有缝隙的，是紧挨着一起的

(3) 行内元素同理(只要加了浮动，也具有了行内块元素的特点)

1.1.6浮动元素经常和标准流父级搭配使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JuuvyJr2-1656257029347)(Typora_image/134.png)]

为了约束浮动元素位置，我们网页布局一般采用的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局第一准则。

1.1.7小米布局案例一

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YLVNQvfv-1656257029348)(Typora_image/135.png)]

执行代码：

<!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>浮动元素搭配标准流父盒子1</title>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 460px;
            background-color: rgb(9, 223, 187);
            /* 让这个盒子居中显示，上下外边距为0 */
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 230px;
            height: 460px;
            background-color: rgb(220, 39, 226);
        }

        .right {
            float: right;
            width: 970px;
            height: 460px;
            background-color: rgb(228, 215, 35);
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 父盒子写值的时候，right盒子不能完全覆盖 -->
        <div class="left">左侧</div>
        <div class="right">右侧</div>

    </div>
</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
35
36
37
38
39
40
41
42
43
44
45
46
47

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oN6HNW2r-1656257029349)(Typora_image/136.png)]

1.1.8小米布局案例二

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LRyvLlrs-1656257029350)(Typora_image/137.png)]

执行代码：

<!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>浮动元素搭配标准流父盒子2</title>
    <style>
        * {
            /* 清除所有样式 */
            margin: 0;
            padding: 0;
        }

        li {
            /* 这个会去掉无序列表li前面的点 */
            list-style: none;
        }

        .box {
            width: 1226px;
            height: 285px;
            background-color: rgb(235, 155, 155);

        }

        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            /* 加浮动，让这些小盒子在一行显示 */
            float: left;
            /* 给每个li指定一个外边距 */
            margin-right: 14px;
        }

        /* * .last {
            /* 因为上面设置了每个小盒子都有一个外边距，导致装不下第四个盒子会掉下来，此时需要清除第四个盒子的右外边距 */
        /* 此时清不掉，原因：权重问题 */
        /* margin-right: 0; 
        }*/

        .box .last {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <!-- ul.box>li*4 -->
    <ul class="box">
        <li>盒子1</li>
        <li>盒子2</li>
        <li>盒子3</li>
        <li class="last">盒子4</li>
    </ul>
</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
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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iZvYSRdT-1656257029351)(Typora_image/138.png)]

1.1.9小米布局案例三

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5YCRbQib-1656257029353)(Typora_image/139.png)]

网页布局第二准则：先设置盒子大小，之后设置盒子的位置。

执行代码：(先指定位置，一行显示不开，它会自动到下一行显示)

<!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>浮动布局练习3</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: rgb(17, 231, 231);
            /* 居中显示  前提：盒子必须指定了宽度 */
            margin: 0 auto;
        }

        .reft {
            /* 都是标准流，上下排列，需要用浮点，让它们在一行 */
            float: left;
            width: 234px;
            height: 615px;
            background-color: rgb(236, 14, 14);
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: rgb(44, 228, 20);
        }

        /* 子代选择器，只选亲儿子 */
        .right>div {
            /* 此时是标准流，需要一行显示 */
            float: left;
            width: 234px;
            height: 300px;
            background-color: rgb(168, 238, 238);
            /* 给每个div设置左外边距 */
            margin-left: 14px;
            /* 给每个div指定下外边距 */
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- .left+.right -->
        <div class="reft">左边布局</div>
        <!-- 此时放div和ul li 都可以 -->
        <div class="right">
            <!-- div*8{$} -->
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</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
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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tz8VhU5D-1656257029354)(Typora_image/140.png)]

2.常见网页布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zfXpnwgv-1656257029355)(Typora_image/141.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KkYiZFTT-1656257029357)(Typora_image/142.png)]

banner	[ˈbænə®]	横幅
footer	ˈfʊtə®]	页脚，页尾;
source	[sɔːs]	来源; 出处; 信息来源;

执行代码：

<!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>常见网页布局</title>
    <style>
        * {
            /* 清除内外边距 */
            margin: 0;
            padding: 0;
        }

        /* 去掉li的前面小点 */
        li {
            list-style: none;
        }

        .top {
            /* 块级元素不设宽度，默认和父级元素一样宽。父级元素是body，是全屏 */
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            /* 居中显示，前提是要设定宽度 */
            margin: 10px auto;
        }

        .box {
            width: 980px;
            height: 300px;
            margin: 10px auto;
            background-color: gray;

        }

        .box li {
            /* 用浮动转成一行排列 */
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            /* 指定一个缝隙 */
            margin-right: 10px;
        }

        /* 注意权重问题 */
        .box .last {
            /* 去掉第四个盒子的右外边距 */
            margin-right: 0;
        }

        .footer {
            /* 只要是通栏的盒子(和浏览器一样宽),不需要指定宽度 */
            height: 200px;
            background-color: gray;
            /* 和上面有点距离 */
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <!-- .top+.banner+.box+.footer -->
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <!-- ul>li*4{$} -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>

</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
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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G8VLgx9t-1656257029357)(Typora_image/143.png)]

遇到的问题：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3qcSAipp-1656257029380)(Typora_image/144.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GVylz9ka-1656257029384)(Typora_image/145.png)]

2.1浮动布局注意点

(1) 浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列找到左右位置

(2)一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k3VYZWbY-1656257029385)(Typora_image/146.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mjmevxER-1656257029386)(Typora_image/147.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6G0zyPHH-1656257029388)(Typora_image/148.png)]

思考
我们前面浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的
但是，所有的父盒子都必须有高度吗？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5SYShYSQ-1656257029390)(Typora_image/149.png)]

理想中的状态，让子盒子撑开父亲，有多少孩子，我父盒子就有多高

但是,给孩子都加了浮动之后，父亲的高度会变成零(如上节代码保错问题一样)

为了解决这个问题，就有了清除浮动。

1
2
3
4
5
6

3.清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IaVDNtJj-1656257029392)(Typora_image/150.png)]

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

3.1清除浮动本质

(1)清除浮动的本质是清除浮动元素造成的影响。

(2)如果父盒子本身有高度，则不需要清除浮动。

(3)清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：

选择器 {clear:属性值；}
1

属性值	描述
left	不允许左侧有浮动元素(清除左侧浮动的影响)
right	不允许右侧有浮动元素(清除右侧浮动的影响)
both	同时清除左右两侧浮动的影响

在实际开发中，几乎只用 clear:both;

清除浮动采取的策略是：闭合浮动。

3.2清除浮动方法：

3.2.1额外标签法也称为隔墙法，是W3C推荐的做法。

3.2.2 父级添加overflow属性

3.2.3 父级添加after伪元素

3.2.4 父级添加双伪元素

3.3清除浮动(一)——额外标签法

额外标签法也称为隔墙法，是W3C推荐的做法。

额外标签法会在浮动元素末尾添加一个空的标签。例如

<div style="clear:both"></div>
1

或者其他标签，如

优点	通俗易懂，书写方便
缺点	添加许多无意义的标签，结构化比较差

注意：要求这个新的空标签必须是块级元素。

执行代码：

<!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>
        .one {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(175, 211, 46);
        }

        .two {
            float: left;
            width: 300px;
            height: 300px;
            background-color: rgb(48, 211, 223);
        }

        .three {
            width: 400px;
            height: 400px;
            float: left;
            background-color: rgb(48, 190, 48);
        }

        .fotter {
            height: 150px;
            background-color: rgb(182, 42, 224);
        }

        /* 浮动清除   第一步 */
        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <!-- .box>.one+.two -->
    <div class="box">
        <div class="one">第一个盒子 加浮动</div>
        <div class="two">第二个盒子 加浮动</div>
        <div class="three">第三个盒子 加浮动</div>
        <!-- 浮动清除 第二步  调用第一步 -->
        <!-- <div class="clear"></div> -->
        <!-- 用行内标签演示效果  不能实现清除浮动 -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <!-- <span class="clear"></span> -->
        <!-- 浮动清除，方法二 -->
        <br class="clear" />

    </div>
    <div class="fotter">fotter 不做设置</div>
</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
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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GDVbWnoj-1656257029393)(Typora_image/151.png)]

总结:

1.清除浮动的本质是？
清除浮动的本质是清除浮动元素脱离标准流造成的影响
2.清除浮动的策略是？
闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子
3.额外标签法？
隔墙法，就是在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式。

3.4清除浮动(二)——父级添加overflow

可以给父级添加overflow属性，将其属性值设置为hidden、auto或者scroll

注意是给父元素添加代码

优点：代码简洁

缺点：无法显示溢出的部分(盒子外面的会切掉)

执行代码：

<!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>清除浮动之父元素</title>
    <style>
        .box {
            /* 给父元素设置清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid purple;
            margin: 0 auto;
        }

        .one {
            float: left;
            width: 300px;
            height: 300px;
            background-color: rgb(224, 187, 187);
        }

        .two {
            float: left;
            width: 300px;
            height: 300px;
            background-color: rgb(215, 235, 245);
        }

        .footer {
            width: 1300px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <!-- .box>.one+.two -->
    <div class="box">
        <div class="one">第一个盒子</div>
        <div class="two">第二个盒子</div>
    </div>
    <div class="footer">footer</div>
</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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YfkEgTL3-1656257029394)(Typora_image/152.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XgSVnXeZ-1656257029396)(Typora_image/153.png)]

3.5清除浮动(三)——after伪元素法

:after 方式是额外标签法的升级版。也是给父元素添加

语法规范：

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix {
    /* IE6、7专有 */
    *zoom: 1;
}
1
2
3
4
5
6
7
8
9
10
11

优点：没有增加标签，结构更加简单

缺点：照顾低版本浏览器

代表网站：百度、淘宝网、网易等。

执行代码：

<!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>清除浮动之伪元素清除</title>
    <style>
        /* :after是一个伪元素的写法 */
        /* 清除浮动  第一步 */
        .clearfix:after {
            content: "";
            /* 该伪元素默认伪行内元素，所以需要转一下 */
            /* 伪元素的简述：在盒子的后面添加了一个小盒子，类似于隔墙法 */
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }

        .box {
            width: 900px;
            border: 1px solid red
        }

        .one {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(235, 245, 101);
        }

        .two {
            float: left;
            width: 300px;
            height: 300px;
            background-color: rgb(124, 233, 121);
        }

        .footer {
            width: 1200px;
            height: 200px;
            background-color: rgb(42, 30, 214);
        }
    </style>
</head>

<body>
    <!-- 清除浮动  第二步 -->
    <div class="box clearfix">
        <div class="one">第一个盒子 添加浮动</div>
        <div class="two">第二个盒子 添加浮动</div>
    </div>
    <div class="footer">第三个盒子</div>
</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
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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ABm6Kfdz-1656257029397)(Typora_image/154.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wSENVBkI-1656257029399)(Typora_image/155.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XIb5HD8u-1656257029400)(Typora_image/156.png)]

3.6清除浮动(四)——双伪元素清除浮动

也是给父元素添加

.clearfix:before,
.clearfix:after {
content: "";
display: table;
}

.clearfix:after {
clear: both;
}

.clearfix {
/* IE6、7专用 */
*zoom: 1;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米，腾讯等

执行代码：

<!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>清除浮动之双伪元素清除</title>
    <style>
        /* 清除浮动  第一步 */
        /* 在盒子前面设置一个伪元素的墙 */
        .clearfix:before,
        /* 在盒子的后面设置一个伪元素的墙 */
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            /* IE6、7专用 */
            *zoom: 1;
        }

        .box {
            width: 900px;
            border: 1px solid red
        }

        .one {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(235, 245, 101);
        }

        .two {
            float: left;
            width: 300px;
            height: 300px;
            background-color: rgb(124, 233, 121);
        }

        .footer {
            width: 1200px;
            height: 200px;
            background-color: rgb(42, 30, 214);
        }
    </style>
</head>

<body>
    <!-- 清除浮动  第二步 -->
    <div class="box clearfix">
        <div class="one">第一个盒子 添加浮动</div>
        <div class="two">第二个盒子 添加浮动</div>
    </div>
    <div class="footer">第三个盒子</div>
</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
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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-waP5228O-1656257029401)(Typora_image/157.png)]

3.7清除浮动总结

为什么需要清除浮动？（需要满足下面三个条件）
(1)父级没高度
(2) 子盒子浮动了
(3) 影响下面布局了，我们就应该清除浮动了。
1
2
3
4

清除浮动的方式	优点	缺点
额外标签法(隔墙法)	通俗易懂，书写方便	添加许多无意义的标签，结构化比较差。
父级overflow:hidden	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after,兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after,兼容性问题

4.ps切图

4.1 常见的图片格式

1.jpg图像格式： JPEG(.JPG)对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的

2.gif图像格式：GIF格式最多只能存储256色，所以通常用来显示简单图形及字体，但是我们可以保持透明背景和动画效果，实际经常用于开发一些图片小动画效果。

3.png图像格式是一种新兴的网络图形格式，结合了GIR和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。如果想要切成背景透明的图片，请选择png格式。

4.PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放、通道、遮罩等多种设计稿。对我们前端人员来说，最大的优点，我们可以直接从上面复制文字，获得图片，还可以测量大小和距离。

前三种可以直接放在页面当中，第四种不可以，是设计稿，在ps里。

PS有很多的切图方式：图层切图、切片切图、PS插件切图等。

4.2切图方式(一)——图层切图

最简单的切图方式：右击图层–>快速导出为PNG.

但是很多情况下，我们需要合并图层再导出：

(1) 选中需要的图层：图层菜单–>合并图层(ctrl+e)

(2) 右击—>快速导出为PNG

4.3 切图方式(二)——切片切图

1.利用切片选择图片

利用切片工具手动划出

2.导出选中的图片

文件菜单–>导出–>存储为web设备所用格式–>选择我们要的图片格式—>存储。

(导出的时候要注意：一定要选择选中的切片)

4.4切图方式(三)——PS插件切图

Cutterman是一款运行在Photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工"导出web所用格式"以及使用切片工具进行挨个切图的繁琐流程。

官网：http://www.cutterman.cn/zh/cutterman

注意：Cutterman插件要求你的PS必须是完整版，不能是绿色版，所以大家需要安装完整版本。

(如何查看自己是不是完整版，在ps里面的窗口–>扩展功能里面是否可以使用)

5.学成在线案例

5.1准备素材和工具

1.学成在线PSD源文件

2.开发工具 = PS(切图)/cutterman插件 + vscode(代码) + chrome(测试)。

5.2 案例准备工作

我们本次采取结构与样式相分离思想：

1.创建study目录文件夹(用于存放我们这个页面的相关内容)

2.用vscode打开这个目录文件夹

3.study目录内新建images文件夹，用于保持图片。

4.新建首页文件index.html(以后我们的网站首页统一规定为index.html)

5.新建style.css样式文件。我们本次采用外链样式表。

6.将样式引入到我们的HTML页面文件中

7.样式表写入清除内外边距的样式，来检测样式表是否引入成功。

5.3 CSS属性书写顺序(重点)

建议遵循以下顺序：

1.布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性(CSS3)：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient

样例：

 <style>
        .jdc {
            display: block;
            position: relative;
            float: left;
            width: 100px;
            height: 100px;
            margin: 0 10px;
            padding: 20px 0;
            font-family: Arial, 'Helvetica Neue',Helvetica, sans-serif;
            color: #333;
            background: rgba(0, 0, 0,.5);
            border-radius: 10px;
        }
 </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5.4页面布局整体思路

为了提高网页制作的效率，布局时通常有以下整体思路：

1.必须确定页面的版心(可视区)，我们测量可得知。

2.分析页面中的行元素，以及每个行模块中的列模块。其实这是页面布局第一准则。

3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则

4.制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。

5.所以，先理清楚布局结构，再写代码尤为重要，这需要我们多写多积累。

5.5确定版心

这个页面的版心是1200像素，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {
    width: 1200px;
    margin: auto;
}
1
2
3
4

5.6 头部模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LXlM1VGY-1656257029402)(Typora_image/158.png)]

1号是版心盒子header 1200*42 的盒子水平居中对齐，上下给一个margin值就可以
版心盒子里面包含2号盒子logo
版心盒子里面包含3号盒子nav导航栏
版心盒子里面包含4号盒子search搜素框
版心盒子里面包含5号盒子user个人信息
注意：要求里面的4个黑子必须都是浮动

导航栏注意点：

实际开发中，我们不会直接用链接a而是用li包含链接(li+a)的做法。

(1) li + a 语义更清晰，一看这就是有条理的列表型类容

(2) 如果直接用a ,搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险，从而影响网站排名)

注意：

(1) 让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示

(2) 这个nav导航栏可以不给宽度，将来可以继续添加其余文字

(3) 因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度

search搜索框：

一个search大盒子里面包含了2个表单

一个是左边的input文本框(不需要右边的边框)，一个是button按钮

5.7 banner制作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ImuU0ITg-1656257029403)(Typora_image/159.png)]

(1) 1号盒子是通栏的大盒子banner, 不给宽度，给高度，给一个蓝色背景

(2) 2号盒子是版心，要水平居中对齐

(3) 3号盒子版心内，左对齐subnav侧导航栏

(4) 4号盒子版心内，右对齐 course课程

5.8 精品推荐小模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2m5JkNiG-1656257029404)(Typora_image/160.png)]

(1) 大盒子水平居中goods精品，注意此处有个盒子阴影

(2) 1号盒子是标题H3左侧浮动

(3) 2号盒子里面放链接左侧浮动，goods-item距离可以控制链接的左右外边距(注意行内元素只给左右内外边距)

(4) 3号盒子右浮动mod修改

5.9精品推荐大模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bn7rqSSj-1656257029405)(Typora_image/161.png)]

(1) 1号盒子为最大的盒子，box 版心水平居中对齐

(2) 2号盒子为上面部分，box-hd ——里面左侧标题H3左浮动，右侧链接a右浮动

(3) 3号盒子为底下部分，box-hd ——里面是无序列表，有10个小li组成

(4) 小li外边距的问题，这里有个小技巧：给box-hd宽度为1215就可以一行装开5个li

vscode: ctrl +g ——————快速定位

5.10 底部模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RXOwlMrp-1656257029407)(Typora_image/162.png)]

(1) 1号盒子是通栏大盒子，底部footer给高度，底色是白色

(2) 2号盒子版心水平居中

(3) 3号盒子版权 copyright左对齐

(4) 4号盒子链接组links右对齐

执行代码：见其他文件

6.CSS定位

需要解决一下问题：

能够说出为什么要用定位
能够说出定位的4种分类
能够说出4种定位各自的特点
能够说出为什么常用子绝父相布局
能够写出淘宝轮播图布局
能够说出显示隐藏的2种方式以及区别

6.1为什么需要定位

提问：以下情况使用标准流或者浮动能实现吗？

1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。

比如：电商网站下滑的时候，某些盒子会固定在某个位置不会移动

此时，标准流或浮动都无法快速实现，此时需要定位来实现

所以：

1.浮动可以让多个块级盒子一行都没有缝隙排列显示，经常用于横向排列盒子。

2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕某个位置，并且可以压住其他盒子。

6.2定位的组成

定位：将盒子定在某一个位置，所以定位也是在摆盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

6.2.1定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

6.2.2 边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left:80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

6.2.1静态定位(了解)

静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器 { position: static; }
1

特性：

1.静态定位按照标准流特性摆放位置，它没有边偏移

2.静态定位在布局时很少用到

6.2.2相对定位relative(重要)

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的(自恋型)。

语法：

选择器 { position: relative; }
1

相对定位的特点：

1.它是相对于自己原来的位置来移动的 (移动位置的时候参照点是自己原来的位置)

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来的位置)

(脱标——指的是脱离标准流)

执行代码：

<!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>相对定位</title>
    <style>
        .box1 {
            /* 给第一个盒子相对定位 第一步代码 */
            position: relative;
            /* 第二步代码 给盒子添加边偏移 */
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: rgb(56, 207, 218);
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: rgb(233, 61, 190);
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JTvxoKbm-1656257029408)(Typora_image/163.png)]

因此，相对定位并没有脱标，最典型的应用是给绝对定位当爹的。。。

6.2.3绝对定位absolute(重要)

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的(拼爹型)

语法：

选择器 { position:absolute; 
1

绝对定位的特点：

1.

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准(Document文档)。

执行代码：

<!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>绝对定位</title>
    <style>
        .father {
            width: 500px;
            height: 400px;
            background-color: rgb(187, 173, 173);
        }

        .son {
            position: absolute;
            top: 300px;
            left: 100px;
            /* bottom: 10px; */
            /* right: 50px; */
            width: 200px;
            height: 200px;
            background-color: rgb(79, 200, 209);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</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
35

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LZg8B83t-1656257029409)(Typora_image/164.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yjyKQlDO-1656257029412)(Typora_image/165.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WD7Cm4lX-1656257029414)(Typora_image/166.png)]

2.

如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置

(孩子，爸爸，爷爷——爸爸没定位，爷爷有，这个盒子就以爷爷为主了)

(孩子，爸爸，爷爷——爸爸有定位，爷爷也有，这个盒子就以爸爸为主了)

执行代码1：

<!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>绝对定位</title>
    <style>
        .father {
            /* 此时给父级加定位，可以约束孩子的定位 第一步*/
            position: relative;
            width: 500px;
            height: 400px;
            background-color: rgb(187, 173, 173);
        }

        .son {
            position: absolute;
            /* top: 50px;
            left: 100px; */
            /* 在祖先元素定位后，更改孩子的位置  第二步 */
            left: 200px;
            top: 100px;
            width: 200px;
            height: 200px;
            background-color: rgb(79, 200, 209);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</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
35
36
37
38

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fmc2IG4z-1656257029415)(Typora_image/167.png)]

执行代码2：

<!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>
        .greatfather {
            /* 添加相对定位  用于对son的约束*/
            position: relative;
            width: 400px;
            height: 400px;
            background-color: rgb(20, 236, 208);
            /* margin-top: 100px; */
        }

        /* 外边距合并的问题的检验：小盒子外边距向下移动50px,大盒子向下移动100px,最后大小盒子都是向下移动100px */
        /* 大小盒子嵌套，大盒子向下移动100px，大小盒子整体都是向下移动100px  */
        /* 大小盒子嵌套，小盒子向下移动50px，大小盒子整体都是向下移动50px */
        .father {
            width: 200px;
            height: 200px;
            background-color: rgb(233, 236, 33);
            margin-top: 100px;
        }

        .son {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 50px;
            height: 50px;
            background-color: rgb(219, 81, 27);


        }
    </style>
</head>

<body>
    <!-- .greatfather>.father>.son -->
    <div class="greatfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3i5qi9dg-1656257029417)(Typora_image/168.png)]

3.

绝对定位不再占用原先的位置。(脱标)

6.3子绝父相

问题：

1.绝对定位和相对定位到底有什么使用场景呢？

2.为什么说相对定位给绝对定位当爹呢？
子绝父相的意思是：如果子级使用绝对定位，父级则需要相对定位

浮动的特点：只会影响插入浮动元素之后的元素

绝对定位不保留位置，相对定位才保留位置

(1) 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子

(2) 父盒子需要加定位限制子盒子在父盒子内显示

(3) 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

6.4固定定位fixed(重要)

固定定位是元素固定于浏览器可视区的位置。主要场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器 { position: fixed; }
1

固定定位的特点：

1.以浏览器的可视窗口为参照点移动元素。

(1) 跟父元素没有任何关系

(2) 不随滚动条滚动

2.固定定位不再占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

(把绝对定位看作是一个矩形，把固定定位看作是一个正方形，正方形也是一个特殊的矩形)

执行代码：

<!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>固定定位</title>
    <style>
        .dj {
            position: fixed;
            top: 100px;
            right: 40px;
            /* left: 0; */
        }
    </style>
</head>

<body>
    <div class="dj">
        <img src="../access/pvp.png" alt="固定定位所用的图片">
    </div>
    <p>在春天里，发现你最美!</p>
    <p>在春天里，发现你最美!</p>
</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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dMkKi7nX-1656257029417)(Typora_image/169.png)]

固定定位小技巧

——固定在版心右侧位置。

小算法：

1.让固定定位的盒子left:50%.走到浏览器可视区(也可以看做版心)的一半位置。

2.让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了。

执行代码：

<!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>固定定位小技巧</title>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: rgb(102, 218, 212);
            margin: 0 auto;
        }

        .fixed {
            /* 固定定位 */
            position: fixed;
            /* 1.走浏览器宽度的一半 */
            left: 50%;
            /* 走版心的一半 */
            /* margin-left: 400px; */
            margin-left: 405px;
            /* 向下移动点 */
            top: 100px;
            width: 50px;
            height: 150px;
            background-color: rgb(128, 224, 84);
        }
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
</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
35
36
37
38
39

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-emtl6rcT-1656257029419)(Typora_image/170.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-whRoyP2O-1656257029420)(Typora_image/171.png)]

6.5 粘性定位 sticky (了解)

粘性定位可以被认为是相对定位和固定定位的混合。

单词	英标	词意
relative	[ˈrelətɪv]	相对的; 相比较而言的; 比较的; 相关联的;
absolute	['æbsəlu:t]	完全的; 全部的; 纯粹的;
fixed	[fɪkst]	固定的; 不变的; 不能变的; 不易改变的;
sticky	[ˈstɪki]	粘性的; 黏(性)的; 一面带黏胶的;

语法：

选择器 { position: sticky; top: 10px; }
1

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素(固定定位特点)
粘性定位占有原先的位置(相对定位特点)
必须添加 top、left、right、bottom其中一个才有效

跟页面滚动搭配。兼容性较差，IE不支持

执行代码：

<!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>粘性定位</title>
    <style>
        body {
            height: 3000px;
        }

        .nav {
            /* 粘性定位  第一步*/
            position: sticky;
            /* 第二步        top 0 指的是顶部当为0像素时，变成固定定位了*/
            top: 0;
            width: 800px;
            height: 50px;
            background-color: rgb(95, 212, 197);
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="nav">我是导航栏</div>
</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

效果显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yqy5X3p5-1656257029422)(Typora_image/172.png)]

6.6 定位的做总结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
relative相对定位	否(占有位置)	相对于自身位置移动	常用
absolute绝对定位	是(不占有位置)	带有定位的父级	常用
fixed固定定位	是(不占有位置)	浏览器可视区	常用
sticky粘性定位	否(占有位置)	浏览器可视区	当前阶段少

1.一定记住相对定位、固定定位、绝对定位两个大的特点：1.是否占有位置(脱标否) 2.以谁为基准点移动位置

2.学会定位重点学会子绝父相。

6.7定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后顺序(z轴)

语法：

选择器 { z-index: 1; }
1

(1) 数值可以是正整数、负整数或0，默认是auto,数值越大，盒子越靠上

(2) 如果属性值相同，则按照书写顺序，后来居上

(3) 数字后面不能加单位

(4) 只有定位的盒子才有z-index属性

执行代码：

<!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>定位堆叠顺序</title>
    <style>
        .one,
        .two,
        .three {
            /* 加定位 */
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }

        /* 标准流没有先后叠放次序 */
        .one {
            background-color: rgb(201, 50, 23);
            /* 给第一个盒子添加z-index */
            z-index: 1;
        }

        .two {
            background-color: rgb(230, 216, 23);
            left: 50px;
            top: 100px;
            z-index: 2;
        }

        .three {
            background-color: rgb(41, 230, 236);
            left: 150px;
            top: 150px;
        }
    </style>
</head>

<body>
    <div class="one">第一个盒子</div>
    <div class="two">第二个盒子</div>
    <div class="three">第三个盒子</div>
</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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zmplFbdY-1656257029424)(Typora_image/173.png)]

6.7.1定位的拓展(一)

(1) 绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中

水平居中：

(1) left: 50%; :让盒子的左侧移动到父级元素的水平中心位置

(2) margin-left: -100px; :让盒子向左移动自身宽度的一半。

垂直居中：

(1) top:50%: 让盒子的顶部移动到父级元素的垂直中心位置

(2) margin-top: -100px; :让盒子向上移动自身高度的一半。

执行代码：

<!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>绝对定位水平垂直居中</title>
    <style>
        .box {
            position: absolute;
            /* 绝对定位的盒子水平居中显示  第一步:left走50% 父容器宽度的一半*/
            left: 50%;
            /* 第二步  margin-left 负值 往左边走 自己盒子宽度的一半 */
            /* margin-left: -100px; */
            /* 盒子垂直居中第一步 top走50% 父容器高度的一半 */
            /* top: 50%; */
            /* 盒子垂直居中第二步  margin-top 负值 往上走，自己盒子高度的一半 */
            /* margin-top: -100px; */
            width: 200px;
            height: 200px;
            background-color: rgb(211, 26, 186);
            /* 让盒子居中对齐 */
            /* margin: 0 auto; */
            /* margin: auto; */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C6ROcoNM-1656257029425)(Typora_image/174.png)]

6.7.2定位的拓展(二)

1.定位的特殊特性

绝对定位和固定定位也和浮动类似

(1) 行内元素添加绝对或者固定定位，可以直接设置高度和宽度

(2) 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

2.脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位) 的元素都不会触发外边距合并的问题。

执行代码：

<!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>定位的特殊特性</title>
    <style>
        /* 行内块元素有个绝对定位，可以直接给高度宽度 */
        span {
            position: absolute;
            background-color: rgb(106, 224, 240);
            top: 100px;
            width: 200px;
            height: 200px;
        }

        div {
            position: absolute;
            background-color: purple;
        }
    </style>
</head>

<body>
    <span>123</span>
    <div>abc</div>
</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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NFVhkA4A-1656257029426)(Typora_image/175.png)]

6.7.3 定位的拓展(三)

1.绝对定位(固定定位) 会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)

但是绝对定位(固定定位) 会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果，文字会围绕浮动元素。

执行代码：

<!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>定位会完全压住标准流盒子内容</title>
    <style>
        .box {
            /* 添加浮动 */
            /* float: left; */
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: rgb(33, 207, 207);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <p>飞流直下三千尺, 疑是银河落九天。</p>
</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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XRiQrN7V-1656257029427)(Typora_image/176.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z8DgJMEI-1656257029428)(Typora_image/177.png)]

6.8 案例：淘宝焦点图布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IYvbH1rX-1656257029429)(Typora_image/178.png)]

分析：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0r3L2at2-1656257029430)(Typora_image/179.png)]

组成	命名
大盒子	类名为: tb-promo 淘宝广告
图片	展示的图片
左右两个按钮	按钮用链接处理。左箭头 prev 右箭头 next
底侧小圆点	ul处理，类名为 prmo-nav

执行代码：

<!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>淘宝轮播图做法</title>
    <style>
        /* 清除内外边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 清除li的样式  (前面有小黑点) */
        li {
            list-style: none;
        }

        .tb-promo {
            /* 子绝父相 */
            position: relative;
            width: 520px;
            height: 280px;
            /* background-color: orange; */
            /* 居中对齐  标准流可以通过auto水平居中 */
            margin: 100px auto;
        }

        /* 相对定位不脱离标准流，跟标准流一样，都可以通过margin : auto实现水平居中 */
        /* 绝对定位和固定固定不可以直接实现水平或者垂直居中   要实现需要用到上文中的算法 */

        /* 强制规定图片的大小 */
        .tb-promo img {
            width: 520px;
            height: 280px;

        }

        /* 并集选择器可以一起声明相同的样式 */
        .prev,
        .next {

            /* left: 0; */
            position: absolute;
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, .3);
            /* 文本水平居中 */
            text-align: center;
            /* 文本垂直居中 */
            line-height: 30px;
            color: #fff;
            /* 去掉链接的下划线 */
            text-decoration: none;
        }

        .prev {
            /* 加了绝对定位的盒子不需要默认转换(行内变成块级)，就可以直接设置宽和高 */
            /* position: absolute; */
            left: 0;
            /* top: 0; */
            /* 加了绝对定位的盒子，要实现垂直居中，需要用到算法 */
            /* top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, .3);
            /* 文本水平居中 */
            /* text-align: center; */
            /* 文本垂直居中 */
            /* line-height: 30px; */
            /* color: #fff; */
            /* 去掉链接的下划线 */
            /* text-decoration: none; */
            /* 设置盒子的边角 */
            /* border-radius: 15px; */
            /* 盒子的右上角设置 */
            border-top-right-radius: 15px;
            /* 盒子的右下角设置 */
            border-bottom-right-radius: 15px;
        }

        .next {
            /* 如果一个盒子既有left属性也有right属性，则默认会执行left属性， 同理  top  bottom 都有时，则会执行top属性 */
            /* 加了绝对定位的盒子不需要默认转换(行内变成块级)，就可以直接设置宽和高 */
            /* position: absolute; */
            right: 0;
            /* top: 0; */
            /* 加了绝对定位的盒子，要实现垂直居中，需要用到算法 */
            /* top: 50%; */
            /* margin-top: -15px; */
            /* width: 20px; */
            /* height: 30px; */
            /* background: rgba(0, 0, 0, .3); */
            /* 文本水平居中 */
            /* text-align: center; */
            /* 文本垂直居中 */
            /* line-height: 30px; */
            /* color: #fff; */
            /* 去掉链接的下划线 */
            /* text-decoration: none; */
            /* 设置盒子的边角 */
            /* border-radius: 15px; */
            /* 盒子的左上角设置 */
            border-top-left-radius: 15px;
            /* 盒子的左下角设置 */
            border-bottom-left-radius: 15px;
        }

        .promo-nav {
            /* 子绝父相 */
            position: absolute;
            bottom: 15px;
            /* left: 0; */
            /* 绝对定位实现水平居中的方法 */
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            /* background-color: blue; */
            /* 白色半透明 */
            background: rgba(255, 255, 255, .3);
            /* 盒子边框变圆角 */
            border-radius: 7px;
        }

        .promo-nav li {
            /* 添加浮动，让它们在一行显示 */
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            /* 把正方形改成圆 */
            border-radius: 50%;
            /* 执行外边距，上下左右都是3px */
            margin: 3px;
        }

        /* li被选择带颜色 */
        .promo-nav .selected {
            /* 直接设定颜色，不会变色   因为上面已经设定了白色，根据元素的层叠性，要考虑权重的问题 */
            /* 解决方法：加权重 */
            background-color: #ff5000;
        }
    </style>
</head>


<body>
    <div class="tb-promo">
        <img src="../access/tb.jpg" alt="图片">
        <!-- 左侧按钮箭头 -->
        <!-- a.prev -->
        <a href="#" class="prev">&lt;</a>
        <!-- 右侧按钮箭头 -->
        <!-- a.next -->
        <a href="#" class="next">&gt;</a>
        <!-- 小圆点 -->
        <!-- ul.promo-nav -->
        <ul class="promo-nav">
            <!-- li*5 -->
            <li class="selected"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</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
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

效果显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PfQfJR3t-1656257029431)(Typora_image/180.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qSCifcPI-1656257029432)(Typora_image/181.png)]

7.网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子。

通过CSS浮动、定位可以让每个盒子排列成为网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法

1.标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

2.浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

3.定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由的在某个盒子内移动，就用定位布局。

8.元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

本质：让一个元素在页面中隐藏或者显示出来。

1.display 显示隐藏

2.visibility 显示隐藏

3.overflow 溢出显示隐藏

8.1 display 属性

display属性用于设置一个元素如何显示。

display:none;	隐藏对象
display: block;	除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置。

后面应用及其广泛，搭配JS可以做很多的网页特效

执行代码：

<!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>显示隐藏元素之display</title>
    <style>
        .one {
            /* display隐藏元素后，不再占有原来的位置 */
            display: none;
            /* display: block 会将隐藏的元素显示出来 */
            /* display: block; */
            width: 200px;
            height: 200px;
            background-color: rgb(218, 56, 204);
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: rgb(39, 235, 202);
        }
    </style>
</head>

<body>
    <div class="one">第一个盒子</div>
    <div class="two">第二个盒子</div>
</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

效果显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2F7coDLo-1656257029433)(Typora_image/182.png)]

8.2 visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。

visibility: visible;	元素可视
visibility: hidden;	元素隐藏

visibility隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来的位置，就用 visibility: hidden

如果隐藏元素不想要原来的位置，就用display:none（用处更多，重点）

执行代码：

<!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>显示隐藏元素之display</title>
    <style>
        .first {
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: rgb(204, 47, 204);
        }

        .second {
            width: 200px;
            height: 200px;
            background-color: rgb(202, 221, 30);
        }
    </style>
</head>

<body>
    <div class="first">第一个</div>
    <div class="second">第二个</div>
</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

显示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qRSSpMLR-1656257029434)(Typora_image/183.png)]

8.3 overflow 溢出

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容与否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。(学成在线首页精品推荐的hot部分)

执行代码：

<!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>显示隐藏元素之overflow</title>
    <style>
        .drama {
            /* 系统默认 */
            /* overflow: visible; */
            /* 把溢出的部分隐藏 */
            /* overflow: hidden; */
            /* scroll溢出的部分显示滚动条   不溢出也显示滚动条 */
            overflow: scroll;
            /* 在需要的时候添加滚动条 */
            /* auto溢出的时候显示滚动条，不溢出的时候不显示滚动条 */
            /* overflow: auto; */
            width: 200px;
            height: 200px;
            border: 3px solid greenyellow;
            margin: 100px auto;
        }

        .demo {
            /* overflow: auto; */
            overflow: scroll;
            width: 200px;
            height: 200px;
            border: 3px solid greenyellow;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class=drama>
        全书主要描写了孙悟空出世及大闹天宫后，遇见了唐僧、猪八戒、沙僧和白龙马，西行取经，
        一路上历经艰险、妖怪魔法高强，经历了九九八十一难，终于到达西天见到如来佛祖，最终五
        圣成真的故事。该小说以“玄奘取经”这一历史事件为蓝本，通过作者的艺术加工，深刻地描绘
        了明代社会现实。
    </div>
    <div class="demo">
        该小说以“玄奘取经”这一历史事件为蓝本，通过作者的艺术加工，深刻地描绘
        了明代社会现实。
    </div>
</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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DdbdbIPa-1656257029436)(Typora_image/184.png)]

display 显示隐藏元素，但是不保留位置
visibility 显示隐藏元素，但是保留原来的位置
overflow 溢出显示隐藏，但是只是对于溢出的部分处理

8.4土豆网案例

需求：土豆网鼠标经过显示遮罩

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4RYBcn9S-1656257029437)(Typora_image/185.png)]

技能：

1.练习元素的显示与隐藏

2.练习元素的定位

核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来

遮罩的盒子不占有位置，就需要用绝对定位和display配合使用。

visibility	[ˌvɪzəˈbɪləti]	可见度; 能见度; 能见距离;
mask	[mɑːsk]	面具; 面罩; 假面具; 护肤膜;

执行代码：

<!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>仿土豆网显示隐藏遮罩案例</title>
    <style>
        .tudo {
            /* 子绝父相 */
            position: relative;
            width: 444px;
            height: 320px;
            background-color: rgb(45, 209, 67);
            /* 让盒子居中 ，可以使用auto的前提条件：必须设置了宽度 */
            margin: 30px auto;
        }

        /* 因为图片比较大，给强制转化大小 */
        /* 方法一：     缺点：如果盒子大小改变，图片也要跟着改 */
        /* .tudo img {
            width: 444px;
            height: 320px;
        } */
        /* 方法二 */
        .tudo img {
            /* 和父亲一样大 */
            width: 100%;
            height: 100%;
        }

        /* 制造遮罩 */
        .mask {
            /* 隐藏遮罩层 */
            display: none;
            /* 改成绝对定位，不占用空间 */
            position: absolute;
            top: 0;
            left: 0;
            /* 和父亲一样大 */
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3) url(../access/arr.png) no-repeat center;

        }

        /* 当我们鼠标经过了 土豆 这个盒子，就让里面的遮罩层显示出来 */
        .tudo:hover .mask {
            /* 显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudo">
        <div class="mask"></div>
        <img src="../access/tudou.jpg">
    </div>
</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
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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5UlzgEPP-1656257029438)(Typora_image/186.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V0V8XvkM-1656257029439)(Typora_image/187.png)]

9.CSS高级技巧

9.1精灵图

9.1.1为什么需要精灵图？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ONSr0qBT-1656257029441)(Typora_image/188.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NGygLtL3-1656257029442)(Typora_image/189.png)]

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术

(也称CSS Sprites、CSS雪碧)

CSS精灵技术的核心内容：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pJB0bdAs-1656257029443)(Typora_image/190.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6NuQJNER-1656257029443)(Typora_image/191.png)]

精灵技术的目的：

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

举例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wH55ibsy-1656257029444)(Typora_image/192.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6PF40yDL-1656257029445)(Typora_image/193.png)]

9.1.2精灵图(sprites)的使用

position	[pəˈzɪʃn]	位置; 地方; 恰当位置; 正确位置;
sprites	[spraɪts]	(传说中的)小仙子，小精灵，小妖精;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9kcGZNim-1656257029446)(Typora_image/194.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-karbWPic-1656257029447)(Typora_image/195.png)]

使用精灵图核心：

1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。

2.这个大图片也被称为sprites 精灵图或者雪碧图

3.移动背景图片位置，此时可以使用 background-position.

4.移动的距离就是这个目标图片的X和Y坐标。注意网页中的坐标有所不同

5.因为一般情况下都是往上往左移动，所以数值是负值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bHnAj8A0-1656257029448)(Typora_image/196.png)]

x轴：往右走是正的，往左走是负的

y轴：往下走是正的，往上走是负的

使用精灵图核心总结：

1.精灵图主要针对于小的背景图片使用。

2.主要借助于背景位置来实现——background-position.

3.一般情况下精灵图都是负值。(千万注意网页中的坐标：X轴右走是正直，左边走是负值，y轴同理。)

(以小盒子的位置开始走)

执行代码：

<!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>精灵图使用</title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            /* background:url(../access/sprite.png); */
            /* 移动小背景盒子的距离，让它显示出来 */
            /* x轴182px y轴0 */
            /* background-position: -182px 0; */
            /* 可以联写 */
            background:url(../access/sprite.png) no-repeat -182px 0;
        }
        .box2 {
            width: 27px;
            height: 25px;
            /* background-color: rgb(64, 201, 211); */
            margin: 200px;
            /* 要让这个小背景显示出来，需要向左走155px,向上走106px */
            background: url(../access/sprite.png) no-repeat -155px -106px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1lwefESh-1656257029448)(Typora_image/197.png)]

9.2精灵图案例

利用精灵图定位技术，写出"organge：

执行代码：

<!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>用fw拼写出orange</title>
    <style>
        span {
            /* 行内元素转化成行内块元素，这样可以设置高度 */
            display: inline-block;
            background: url(../access/abcd.jpg) no-repeat;
        }
        .o {
            width: 106px;
            height: 108px;
            background-position: -372px -276px;
        }
        .r {
            width: 108px;
            height: 106px;
            background-position: -138px -419px;
        }
        .a {
            width: 107px;
            height: 110px;
            background-position: 0 -10px;
        }
        .n {
            width: 111px;
            height: 112px;
            background-position: -257px -275px;
        }
        .g {
            width: 104px;
            height: 105px;
            background-position: -98px -143px;
        }
        .e {
            width: 98px;
            height: 102px;
            background-position: -483px -11px;
        }
    </style>
</head>
<body>
    <span class="o">o</span>
    <span class="r">r</span>
    <span class="a">a</span>
    <span class="n">n</span>
    <span class="g">g</span>
    <span class="e">e</span>
</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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D8E2Jo7V-1656257029449)(Typora_image/198.png)]

9.3 字体图标

9.3.1 字体图标的产生

字体图标的使用场景：主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点的，但是缺点很明显。

1.图片文件还是比较大的

2.图片本身放大和缩小会失真

3.一旦图片制作完毕想要更换非常复杂

此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bR0G8zOY-1656257029451)(Typora_image/199.png)]

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求。

灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

(简单的小图标用字体来做，复杂的用精灵图来做)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mtrMFVbH-1656257029452)(Typora_image/200.png)]

字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为：

1.字体图标的下载

2.字体图标的引入(引入到我们html页面中)

3.字体图标的追加(以后添加新的图标)

9.3.2 字体图标的下载

推荐网站：

1.https://icomoon.io/ 免费，不需要登录

2.https://www.iconfont.cn/ 需要登录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DcD4yKQo-1656257029453)(Typora_image/201.png)]

下载完毕之后，注意原先的文件不要删，后面会用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E2np3XaO-1656257029453)(Typora_image/202.png)]

操作步骤：

(1) 把下载包里面的fonts文件夹放入页面根目录(html文件在哪，fonts就放在哪)

(路径问题，主要为了让字体和html文件在同一级)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kcL7GBpf-1656257029454)(Typora_image/203.png)]

fonts里面的结构：(四个不同文件，为了兼容性)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mEEdyIQ2-1656257029456)(Typora_image/204.png)]

(2) 在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到我们页面中。一定注意字体文件路径的问题。

在style.css中的字体声明：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?6cm0mw');
  src:  url('fonts/icomoon.eot?6cm0mw#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?6cm0mw') format('truetype'),
    url('fonts/icomoon.woff?6cm0mw') format('woff'),
    url('fonts/icomoon.svg?6cm0mw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

1
2
3
4
5
6
7
8
9
10
11
12

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C9qGbLG6-1656257029457)(Typora_image/205.png)]

(3) html标签内添加小图标。

<span></span>
1

(4) 给标签声明字体

font-family: 'icomoon';     #  一般后面的 icomoon  不做更改
1

(5) 可以更改文字的颜色大小

执行代码：

<!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>字体图标的使用</title>
    <style>
        /*  第二步 字体声明 */
        /* 从CSS文件中复制代码 */
        @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?6cm0mw');
  src:  url('fonts/icomoon.eot?6cm0mw#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?6cm0mw') format('truetype'),
    url('fonts/icomoon.woff?6cm0mw') format('woff'),
    url('fonts/icomoon.svg?6cm0mw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


    /* 第四步，声明字体 */
    span {

        font-family: 'icomoon';
        /* 第五步，改变字体的大小颜色 */
        font-size: 100px;
        color: greenyellow;
    }
    </style>
</head>
<body>
    <!-- 第三步 使用 -->
    <span></span>
    
</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
35
36
37
38
39

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B6Ztk5yz-1656257029458)(Typora_image/206.png)]

9.3.3字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的selection.json重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GWLqWqI2-1656257029459)(Typora_image/207.png)]

字体图片加载原理：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2QQlnaNz-1656257029460)(Typora_image/208.png)]

比如说，浏览器需要用到一个定位的小图标，这时候给服务器发送一个请求，让服务器返回给浏览器一个定位的图标，那服务器返回的是这四个字体文件给浏览器。浏览器拿到这个字体文件，把它渲染出来。各种各样的字体图标豆包含在这四个文件中，所以下次需要其他图标，直接拿来使用就行了，服务器也只响应了一次请求。

9.3.4 CSS三角

场景：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V8iQDZNB-1656257029460)(Typora_image/209.png)]

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。

一张图，你就知道CSS三角是怎么来的了，做法如下：

执行代码：

<!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>CSS 三角制作</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid greenyellow; */
            border-top: 10px solid gold;
            border-bottom: 10px solid rgb(223, 21, 88);
            border-left: 10px solid rgb(12, 207, 214);
            border-right: 10px solid rgb(106, 30, 206);
        }

        /* 如何制作三角形，留一个边，把其他三个边改成透明色 transparent*/
        /* 朝下的三角 */
        .box2 {
            width: 0;
            height: 0;
            /* 下面两行代码是为了照顾低版本浏览器，一般是不需要的 */
            /* line-height: 0; */
            /* font-size: 0; */
            border: 100px solid transparent;
            border-top-color: gold;
            margin: 30px auto;
           
        }
        /* 朝右的三角 */
        .box3 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: green;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</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
35
36
37
38
39
40
41
42
43
44
45
46
47

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7x4kLiac-1656257029461)(Typora_image/210.png)]

9.3.5京东三角案例

核心原理：先准备一个矩形，然后再准备一个小盒子，让小盒子成三角形，调整位置。

执行代码：

<!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>CSS京东三角制作</title>
    <style>
        .jd {
            /* 子绝父相 */
            position: relative;
            width: 120px;
            height: 249px;
            background-color: red;
        }
        .jd span {
            /* 使用绝对定位，才能压住盒子 */
            position: absolute;
            /* 调整位置 */
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            /* 下面两行代码，为了照顾兼容性 */
            line-height: 0;    
            font-size: 0;
             /* transparent 表示透明 */
            border: 5px solid transparent;
            border-bottom-color: red;
        }
    </style>
</head>
<body>
    <div class="jd">
        <span></span>
    </div>
</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
35
36
37
38

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yDcDPuaW-1656257029462)(Typora_image/211.png)]

9.4 CSS用户界面样式

9.4.1 界面样式的定义

所谓的用户界面，就是更改一些用户操作样式，以便提高更好的用户体验。

(1) 更改用户的鼠标样式

(2) 表单轮廓

(3) 防止表单域拖拽

9.4.2鼠标样式 cursor

li { curosr:pointer; }
1

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

执行代码：

<!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>用户界面样式-鼠标样式</title>
</head>
<body>
    <!-- ul>li*5 -->
    <ul>
        <li style="cursor: default;">我是默认的小白鼠标样式</li>
        <li style="cursor: pointer;">我是鼠标小手羊身上</li>
        <li style="cursor: move;">我是鼠标移动样式</li>
        <li style="cursor: text;">我是鼠标文本样式</li>
        <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
    </ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

9.4.3轮廓线 outline

给表单添加outline: 0; 或者outline:none; 样式之后，就可以去掉默认的蓝色边框。

input {outline: none; }
1

9.4.4 防止拖拽文本域 resize

textarea { resoze: none; }
1

执行代码：

<!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>用户界面样式-表单轮廓和防止拖拽文本域</title>
    <style>
        input,textarea {
            /* 这样就可以取消表单的轮廓线 */
            /* 给文本域也取消掉了轮廓线 */
            outline: none;
        }
        textarea {
            /* 这样就防止调整文本框的大小 */
                resize: none;
        }
    </style>
</head>
<body>
    <!-- 1.取消表单轮廓 -->
    <input type="text">
    <!-- 2.防止拖拽文本域 -->
    <!-- 为了防止文本域出现空白区域，把文本域标签放在一行上写 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
</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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QUc56w3R-1656257029463)(Typora_image/212.png)]

9.4.5 vertical-align 属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单(行内块元素) 和文字垂直对齐。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uD5ooBsX-1656257029464)(Typora_image/213.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nxHSzH5X-1656257029465)(Typora_image/214.png)]

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align: baseline |top |middle | bottom
1

值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w3zAK5TR-1656257029465)(Typora_image/215.png)]

图片、表单都属于行内块元素，默认的vetical-align是基线对齐。

此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle 就可以让文字和图片垂直居中对齐了。

执行代码：

<!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>利用vertical-align实现图片文字垂直居中对齐</title>
    <style>
        img {
            /* 顶部对齐 */
            /* vertical-align: top; */
            /* 居中对齐 */
            vertical-align: middle;
            /* 沿底线对齐 */
            /* vertical-align: bottom; */
            /* 不设置，图片默认baseline对齐 */
        }
    </style>
</head>
<body>
    <img src="../access/img.jpg">大家好，我是刘德华！
</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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4mHyTIud-1656257029466)(Typora_image/217.png)]

verticla-align只针对于行内或行内块元素有效，如果是图片标签，不需要再转换，因为它本来就属于行内块元素。

如果你用一个盒子添加背景图片，那别忘了把这个盒子转化为行内块元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ovLOE4E-1656257029470)(Typora_image/218.png)]

文本域和文字也能实现垂直居中

执行代码：

<!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>
        textarea {
            /* 防止文本域拖拽改变形状 */
            resize: none;
            /* 去除点击之后出现的轮廓线 */
            outline: none;
            /* 文字和文本域实现垂直居中 */
            vertical-align: middle;
        }
    </style>
</head>
<body>
        <!-- 文本域也属于行内块元素 -->
        <textarea name="" id="" cols="30" rows="10"></textarea>请您留言
</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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pIjWfN4C-1656257029472)(Typora_image/219.png)]

9.4.6解决图片底部默认空白缝隙问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-11nPRiXC-1656257029479)(Typora_image/220.png)]

bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要的解决方法有两种：

1.给图片添加vertical-align:middle |top | bottom 等

2.把图片转化为块级元素 display:block;

（只有行内元素和行内块元素才有图片和文字基线对齐的问题，块级元素没有这样的问题）

执行代码：

<!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>图片底侧空白缝隙解决方案</title>
    <style>
        div {
            border: 2px solid orange;
        }
        img {
            /* 方法1：底线对齐 */
            /* vertical-align: bottom; */
            /* 方法2：垂直居中对齐 */
            /* vertical-align: middle; */
            /* 方法3：把图片转换成块级元素 */
            display: block;
        }
    </style>
</head>
<body>
    <div> <img src="../access/wangxiaobo.jpg" alt="这是一个图片"></div>
</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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1KZXIrDy-1656257029481)(Typora_image/221.png)]

9.4.7 溢出的文字省略号显示

1.单行文本溢出显示省略号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJM7ASh0-1656257029482)(Typora_image/222.png)]

2.多行文本溢出显示省略号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8AhJz2qs-1656257029483)(Typora_image/223.png)]

9.4.7.1.单行文字溢出省略号显示

单行文本溢出显示省略号——必须满足三个条件

/* 1.如果文字显示不开，也必须一行内显示 */
white-space: nowrap;
/* 2.溢出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
text-overflow: ellipsis;
1
2
3
4
5
6

执行代码：

<!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>单行文本溢出显示省略号</title>
    <style>
        div {
            width: 200px;
            height: 150px;
            background-color: rgb(147, 214, 21);
            /* 居中对齐的前提，设置了宽度 */
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开，自动换行  下面这行系统默认的，不用进行设置*/
            /* white-space: normal; */
            /* 1.如果文字显示不开，也必须一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏 */
            overflow: hidden;
            /* 3.文字用省略号替代超出的部分 */
            text-overflow: ellipsis;

        }
    </style>
</head>
<body>
    <div>
        梅雨季，是一个大而泛之的题材，如何抒写很考验写作者的功力。
        首先，这首诗的切入角度比较独特，“离吃饭还有一会儿/雨开始下
        我撑起黑色的伞往回走”，将时间定格于世俗生活片段，场景是开始
        下雨，行为是打着黑色的伞往回走，虽然没有交代从哪里到哪里（在
    </div>
</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
35

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QcANecVt-1656257029484)(Typora_image/224.png)]

9.4.7.2 多行文字溢出省略号显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gk1MEx2V-1656257029485)(Typora_image/226.png)]

多行文本溢出显示省略号，有较大兼容性问题，适合于webkit浏览器或移动端(移动端大部分是webkit内核)

执行代码：

<!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>多行文字溢出显示省略号</title>
    <style>
        div {
            width: 200px;
            height: 150px;
            background-color: rgb(30, 118, 158);
            /* 水平居中对齐的前提，设定宽度 */
            margin: 100px auto;
            /*1. 溢出的部分隐藏 */
            overflow: hidden;
            /* 2.文字用省略号替代超出的部分 */
            text-overflow: ellipsis;
            /* 3.弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 4.限制在一个块元素显示的文本的行数 */
            /* 要在第三行省略，可以把2改成3 */
            -webkit-line-clamp: 2;
            /* 5.设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div>多行文字溢出显示省略号演示多行文字溢出显示省略号演示多</div>
</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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MPtQwW7d-1656257029486)(Typora_image/225.png)]

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

10.常见的布局技巧

10.1 margin负值的运用

场景：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-74zZlBWJ-1656257029487)(Typora_image/227.png)]

执行代码：

<!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>margin负值的巧妙应用</title>
    <style>
        ul li {
            /* 添加浮动，让块级元素在一行显示 */
            float: left;
            /* 取消掉li前面的小点 */
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            /* 使用margin的负值解决重叠边框颜色过深的问题 */
            /* 值越大，向右移动 */
            margin-left: -1px;
        }
    </style>
</head>
<body>
    <!-- ul>li{$}*5 -->
    <ul>
        <!-- 代码执行顺序，挨个执行li -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xgZuQ2Oi-1656257029488)(Typora_image/228.png)]

实现原理，让第二个盒子的边正好压住第一个盒子的边

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c0FlJoqb-1656257029489)(Typora_image/229.png)]

拓展：

<!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>margin负值的巧妙应用</title>
    <style>
        ul li {
            /* 添加浮动，让块级元素在一行显示 */
            float: left;
            /* 取消掉li前面的小点 */
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            /* 使用margin的负值解决重叠边框颜色过深的问题 */
            /* 值越大，向右移动 */
            margin-left: -1px;
        }
        /* 鼠标经过li,就让它的边框变成另外一种颜色 */
        ul li:hover {
            /* 第一种情况：如果盒子没有定位，则鼠标经过添加相对定位即可 */
            /* 相对定位占有位置，绝对定位占用位置 */
            position: relative;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <!-- ul>li{$}*5 -->
    <ul>
        <!-- 代码执行顺序，挨个执行li -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</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
35
36
37
38
39
40
41

<!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>margin负值的巧妙应用</title>
    <style>
        ul li {
            /* 1.如果li因为特殊原因，需要加上相对定位 */
            position: relative;
            /* 添加浮动，让块级元素在一行显示 */
            float: left;
            /* 取消掉li前面的小点 */
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            /* 使用margin的负值解决重叠边框颜色过深的问题 */
            /* 值越大，向右移动 */
            margin-left: -1px;
        }
        /* 鼠标经过li,就让它的边框变成另外一种颜色 */
        ul li:hover {
            /* 2. 如果li都有定位 */
            /*提高层级 来保证选中的盒子四个框都能变色 */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <!-- ul>li{$}*5 -->
    <ul>
        <!-- 代码执行顺序，挨个执行li -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</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
35
36
37
38
39
40
41
42
43

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AcerA5bm-1656257029489)(Typora_image/230.png)]

总结：

鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有定位，则加相对定位(保留位置)，如果有定位，则加z-index)

10.2 文字围绕浮动元素

场景

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SokviLFo-1656257029490)(Typora_image/231.png)]

巧妙运用浮动元素不会压住文字的特性

执行代码：

<!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>文字围绕浮动元素的妙用</title>
    <style>
        /* 去除p的内外边距 */
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 70px;
            background-color: aqua;
            /* 水平居中，前提是设置了宽度 */
            margin: 0 auto;
        }
        /* 设置图片的大小 */
        .pic {
            /* 让图片盒子左浮动 */
            float: left;
            width: 70px;
            height: 60px;
            /* 让图片和文字隔断距离 */
            margin-right: 5px;
        }
        .pic img {
            /* 图片跟它父类大小一样 */
            width: 100%;
        } 
    </style>
    <!-- 浮动的本质是做环绕效果，在浮动图片的状态下，文字不会被图片遮盖 -->
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="../access/wangxiaobo.jpg" alt="这是一张图片">
        </div>
        <!-- 1.直接把文字放里面，不做处理 -->
        <p>文字围绕浮动元素的妙围绕浮动元素的妙用</p>
    </div>
</body>
</html>
<!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>文字围绕浮动元素的妙用</title>
    <style>
        .box {
            width: 300px;
            height: 70px;
            background-color: aqua;
            /* 水平居中，前提是设置了宽度 */
            margin: 0 auto;
        }
        /* 设置图片的大小 */
        .pic {
            /* 让图片盒子左浮动 */
            float: left;
            width: 70px;
            height: 60px;
            /* 让图片和文字隔断距离 */
            margin-right: 5px;
        }
        .pic img {
            /* 图片跟它父类大小一样 */
            width: 100%;
             /* 不设置高度100%，会让图片自适应，可能会凸出来 */
            height: 100%;
        } 
    </style>
    <!-- 浮动的本质是做环绕效果，在浮动图片的状态下，文字不会被图片遮盖 -->
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="../access/wangxiaobo.jpg" alt="这是一张图片">
        </div>
        <!-- 1.直接把文字放里面，不做处理 -->
        <p>文字围绕浮动元素的妙围绕浮动元素的妙用</p>
    </div>
</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
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

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jbpmX91I-1656257029491)(Typora_image/232.png)]

10.3 行内块的巧妙运用–布局技巧

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wRO1chpx-1656257029492)(Typora_image/233.png)]

执行代码：

<!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>行内块元素的巧妙应用</title>
    <style>
        /* 去掉所有的内外边距 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 利用行内块元素，既可以设置宽度，高度，也可以在一行上，并且中间有缝隙，不需要调margin值， */
        /* 行内块元素最大的特点是在于，给父盒子添加text-alingn:center,里面所有的行内块元素都会实现水平         居中对齐 */
        /* 只要给父亲添加水平居中，那里面的行内元素和行内块元素都会跟着水平居中 */
        .box {
            text-align: center;
        }

        /* 行内块元素和块级元素才有大小 */
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            /* 让a里面的文字水平居中，垂直居中 */
            text-align: center;
            line-height: 36px;
            /* 去掉a的下划线 */
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        /* 考虑权重 */
        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .current,
        .box .elp {
            /* 去掉颜色 */
            background-color: #fff;
            /* 去掉边框 */
            border: none;
            /* 取消点击完之后的蓝色边框 */
            /* 这个input的蓝框,当你真正做项目的时候会发现,非常讨厌,你必定要去掉它!很简单:outline:none!设置之后就没啦! */
            outline: none;
        }

        /* 给输入框加样式 */
        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
        }

        /* 给确定按钮加样式 */
        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- a{$}*8 -->
        <!-- 一键输入多行快捷键：Alt+Shift -->
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</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
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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-igtIxdJi-1656257029493)(Typora_image/234.png)]

10.3.1–布局技巧–CSS三角巧妙应用(上)

练习：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NbE7V0id-1656257029494)(Typora_image/235.png)]

原理：一个矩形盒子加一个三角线盒子。

难点：制作三角形盒子，代码如下：

width: 0;
height: 0;
/* border 的顺序：上右下左 */
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2.样式都是solid */
border-style: solid;
/* 3.上边框宽度要大，右边框宽度稍小，其余边框该为0 */
border-width: 100px 50px 0  0;
1
2
3
4
5
6
7
8
9

全代码：

<!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>CSS三角强化的巧妙应用</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* transparent 透明色 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid rgb(96, 211, 20);
            border-bottom: 0px solid rgb(24, 174, 201);
            border-left: 0px solid rgb(230, 31, 236); */
            /* border 的顺序：上右下左 */
            /* 1.只保留右边的边框有颜色 */
            border-color: transparent red transparent transparent;
            /* 2.样式都是solid */
            border-style: solid;
            /* 3.上边框宽度要大，右边框宽度稍小，其余边框该为0 */
            border-width: 100px 50px 0 0;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OvD8jUNa-1656257029495)(Typora_image/236.png)]

10.3.2–布局技巧–CSS三角巧妙应用(下)

执行代码：

<!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>CSS三角强化的巧妙应用</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* transparent 透明色 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid rgb(96, 211, 20);
            border-bottom: 0px solid rgb(24, 174, 201);
            border-left: 0px solid rgb(230, 31, 236); */
            /* border 的顺序：上右下左 */
            /* 1.只保留右边的边框有颜色 */
            border-color: transparent red transparent transparent;
            /* 2.样式都是solid */
            border-style: solid;
            /* 3.上边框宽度要大，右边框宽度稍小，其余边框该为0 */
            border-width: 100px 50px 0 0;
        }

        .price {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            /* 居中对齐的前提，设置了宽度 */
            margin: 0 auto;
            /* 给父亲添加垂直居中，让子孩子继承 */
            line-height: 24px;
            color: #fff;
            /* 加粗 */
            font-weight: 700;
        }

        .miaosha {
            /* 子绝父相 */
            position: relative;
            /* span是行内块，没有宽高，让左边盒子浮动，右边不浮动，右边盒子就会到左边来 */
            /* 文字会围绕浮动元素 */
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            /* 水平居中 */
            text-align: center;
            margin-right: 8px;

        }

        .miaosha i {
            position: absolute;
            /* 把小三角定位到右侧 */
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            /* border-width  上右下左 */
            border-width: 24px 10px 0 0;
        }

        .origin {
            font-size: 12px;
            color: gray;
            /* 给文字加删除线 */
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="price">
        <span class="miaosha">
            ￥1650
            <!-- 专门做三角 -->
            <i></i>
        </span>
        <span class="origin">￥5650</span>
    </div>
</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
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

效果展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tdzolq9-1656257029497)(Typora_image/237.png)]

11.CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

简单理解：CSS初始化是指重设浏览器的样式。(也称为CSSreset)

每个网页都必须首先进行CSS初始化，以保证浏览器的兼容性

以京东CSS初始化代码为例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uaRKalMi-1656257029497)(Typora_image/238.png)]

将代码复制到VScode中：

<!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>京东CSS初始化</title>
    <style>
        /* 把我们所有标签的内外边距清零 */
        * {
            margin: 0;
            padding: 0
        }

        /* 斜体的文字不倾斜 */
        em,
        i {
            font-style: normal
        }

        /* 去掉li前面的小圆点 */
        li {
            list-style: none
        }

        img {
            /* border: 0;为了照顾低版本浏览器 如果图片外面包含了链接，会有边框的问题 */
            border: 0;
            /* 取消图片底侧有空白缝隙的问题 */
            vertical-align: middle
        }

        button {
            /* 当鼠标经过button按钮的时候，鼠标样式变成了小手 */
            cursor: pointer
        }

        a {
            /* 设置a标签的颜色和取消下划线 */
            color: #666;
            text-decoration: none
        }

        a:hover {
            /* 鼠标经过变成红色 */
            color: #c81623
        }

        /* 设置按钮，输入框的字体 */
        button,
        input {
            font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
        }

        /* 设置body样式，背景色，字体 */
        body {
            /* 抗锯齿形  文字放大之后会有拒斥形状，让文字显示的更大清晰 CSS3的写法 */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            /* 所有文字大小是12px，1.5倍行高 */
            /* "\5B8B\4F53" 是宋体   把中文字体的名称用相应的Unicode编码来代替 这样浏览器兼容比较好 */
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            color: #666
        }

        /* 自定义的样式 */
        .hide,
        .none {
            display: none
        }

        /* 清除浮动的写法 */
        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }

        .clearfix {
            *zoom: 1
        }
    </style>
</head>

<body>

</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
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

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题

比如：

黑体	\9ED1\4F53
宋体	\5B8B\4F53
微软雅黑	\5FAE\8F6F\96C5\9ED1

相关阅读:
【51单片机】6-点亮第一个LED灯
 fluttter学习之ButtonStyle 、MaterialStateProperty
ADO.NET实体数据模型-DatabaseFirst
neo4j查询两节点之间所有路径/关系
 Springboot添加静态资源映射addResourceHandlers，可实现url访问
 简单理解事件冒泡和事件捕获
 PE文件硬编码代码注入
 若依前后端不分离-表单中某一列是其他几列计算的结果
 通用栈实现
 49. Group Anagrams
原文地址：https://blog.csdn.net/m0_57021623/article/details/125476060