140. CSS3

发表于 更新于 分类于

简单介绍

  • HTML + CSS + JavaScript
  • 结构 + 表现 + 交互

如何学习

  1. css 是什么
  2. css怎么用（快速入门）
  3. css选择器（重点+难点）
  4. 美化网页（文字、阴影、超链接、列表、渐变……）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效效果），教程：菜鸟教程

什么是css

  • css：Cascading Style Sheet层叠(级联)样式表

  • css：表现（美化网页）：字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动……

发展史

  • css1.0
  • css2.0：DIV（块）+ CSS，提出了html 和 css 结构分离的思想，网页变得简单，利于 SEO
  • css2.1：浮动和定位
  • css3.0：圆角、阴影、动画……（浏览器兼容性）

练习格式

快速入门

style

  • 基本入门

    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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <!--规范，<style>可以编写css代码，每一个声明最好使用分号结尾
        语法：
            选择器 {
                声明1;
                声明2;
                声明3;
            }
        -->
        <style>
            h1 {
                color: rebeccapurple;
            }
        </style>

    </head>
    <body>
        <h1>我是标题</h1>
    </body>
    </html>

  • 建议使用这种方式

css优势

  • 内容和表现分离
  • 网页结构表现统一，可以实现复用
  • 样式十分丰富
  • 建议使用独立于 HTML 的 CSS 文件
  • 利于 SEO，容易被搜索引擎收录

css的3种导入方式

行内样式

1
2
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:aqua;">我是标题</h1>

内部样式：style标签

外部样式（推荐）

优先级：

就近原则：最近的是：行内样式，然后看内部样式和外部样式谁在上面

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*注释*/
        h1 {
            color: green;
        }
    </style>
    
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1>我是标题</h1>
</body>
</html>

拓展：外部样式两种写法

  • 链接式：html（推荐）

    1
    <link rel="stylesheet" href="css/style.css">

  • 导入式：css2.1 是 css2.1 特有的

    1
    2
    3
    <style>
        @import url("css/style.css");
    </style>

  • 缺点：导入式会先显示结构，再去渲染；链接式是一起生效

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

标签选择器

选择一类标签

1
2
3
4
5
6
7
8
9
10
/*标签选择器，会选择到页面上所有的这个标签的元素*/
h1 {
    color: red;
    background: antiquewhite;
    border-radius: 24px;
}
p {
    font-size: 80px;

}

类选择器：class

  • 语法

    1
    2
    3
    4
    类选择器的格式：
    .类的名称 {
       样式
    }

  • 好处

    好处：可以多个标签归类，是同一个class，可以复用；可以跨标签

  • 示例

    1
    2
    3
    4
    5
    6
    7
    */
    .title1 {
        color: red;
    }
    .title2 {
        color: blueviolet;
    }

ID选择器

  • ID 一定要唯一

  • 语法

    1
    2
    3
    4
    5
    id选择器：id必须保证全局唯一
    格式：
    #id名称 {

    }

  • 示例

    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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*
            id选择器：id必须保证全局唯一
            格式：
            #id名称 {

            }     
            */
            #title1 {
                color: blueviolet;
            }

            .title2 {
                color: red;
            }

            h1 {
                color: green;
            }
        </style>
    </head>
    <body>
    <h1 id="title1" class="title2">标题1</h1>
    <h1 class="title2">标题2</h1>
    <h1 class="title3">标题3</h1>
    <h1>标题4</h1>
    <h1>标题5</h1>
    </body>
    </html>

优先级：

不遵循就近原则，是固定的：

id选择器 > class选择器 > 标签选择器

层次选择器

模型

后代选择器：空格

在某个元素的后面，如：祖爷爷->爷爷->爸爸->你

1
2
3
4
/* 后代选择器*/
body p {
    background: red;
}

子选择器： >

只有一代，即儿子

1
2
3
4
/*子选择器*/
body>p {
    background: blueviolet;
}

相邻兄弟选择器：+

同辈：哥哥，姐姐

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*相邻兄弟选择器：只有一个，相邻：对下*/
        .activate + p {
            background: aqua;
        }
    </style>
</head>
<body>
    <p>p0</p>
    <p class="activate">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>

    <p class="activate">p7</p>
    <p>p8</p>
</body>
</html>

通用选择器：~

1
2
3
4
/*通用兄弟选择器：当前选中元素的向下的所有兄弟元素*/
.activate ~ p {
    background: green;
}

结构伪类选择器

伪类选择器：xx:xxx {}

示例

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用class和id选择器-->
    <style>
        /*1. ul的第一个子元素*/
        ul li:first-child {
            background: red;
        }
        /*2. ul的最后一个子元素*/
        ul li:last-child {
            background: green;
        }
        /*3. 选中p1：定位到父元素，选择当前的第一个元素*/
        /*选择当前p元素的父级元素，选中父级元素的第一个元素，并且是当前元素才生效*/
        p:nth-child(1) {
            background: aqua;
        }
        /*选择当前p元素的父级元素，选中父级元素类型是当前元素的第2个元素*/
        p:nth-of-type(2) {
            background: blueviolet;
        }
    </style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

属性选择器（常用）

id 和 class 结合

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a {
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: white;
            text-decoration: none;
            margin-right: 5px;
            font: blod 20px/50px Arial;
            line-height: 50px;
        }


        /*存在id属性的元素
        格式：
        a[属性名、属性名=属性值（值可以用正则）、属性名*=属性值（值可以用正则）] {}
        =绝对等于
        *= 包含这个值
        ^= 以这个值开头
        $= 以这个结尾
        */
        a[id] {
            background: black;
        }
        /*id=first的元素*/
        a[id="first"] {
            background: red;
        }
        /*class有links的元素*/
        a[class*="links"] {
            background: yellow;
        }
        /*选中href中以http开头的元素*/
        a[href^="http"] {
            background: blueviolet;
        }
        a[href$="pdf"] {
            background: rebeccapurple;
        }
    </style>
</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="https://qeuroal.top" class="links item activate" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images123.png" class="links item">4</a>
    <a href="images123.png" class="links item">5</a>
    <a href="abc">6</a>
    <a href="/a.pdf">7</a>
    <a href="/abc.pdf">8</a>
    <a href="/abc.doc">9</a>
    <a href="/abcd.doc" class="links item last">10</a>
</p>

</body>
</html>

美化网页元素

为什么要美化网页

  • 有效的传递页面信息
  • 美化网页，页面漂亮才能吸引用户
  • 凸显页面的主题
  • 提高用户的体验

span标签

重点要突出的字，使用 span 套起来

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">
    <title>Title</title>
    <style>
        #title1 {
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习 <span id="title1">css</span>
</body>
</html>

字体样式

  • px：像素

  • em：缩进

  • 分开写：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!--
    font-family 字体
    font-size 字体大小
    font-weight 字体粗细
    color 字体颜色
    -->
    <style>
        body {
            color: #a13d30;
            font-family: "Consolas", 楷体;
        }
        h1 {
            font-size: 50px;
        }
        .p1 {
            font-weight: bold;
        }
    </style>

  • 合并写

    1
    2
    3
    4
    5
    6
    <!--字体风格-->
    <style>
        p {
            font: oblique bolder 18px "楷体" ;
        }
    </style>

文本样式

颜色

color

  • 单词
  • rgb：0~F
  • rgba：透明度, 0~1

文本对齐方式

text-align=center排版：居中、左、右

首行缩进

text-indent： 段落首行缩进，一般是2em（首行缩进2字符）

块高

height 块高

行高

line-height：单行文字上下居中line-height=height

装饰

text-decoration

文本图片水平对齐

vertical-align: middle;

示例

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    颜色：
        单词
        RGB：0~F
        RGBA：透明度, 0~1

    text-align 排版：居中、左、右
    text-indent 段落首行缩进，一般是2em（首行缩进2字符）
    height 块高
    line-height 行高；和块的高度一致，就可以上下居中
    -->
    <style>
        h1 {
            /*color: rgba(0, 255, 255, 0.5);*/
            color: rgb(0, 255, 255);
            text-align: center;
        }

        .p1 {
            text-indent: 2em;
        }
        .p3 {
            background: red;
            height: 300px;
            line-height: 300px;
        }

        /*下划线*/
        .l1 {
            text-decoration: underline;
        }
        /*中划线*/
        .l2 {
            text-decoration: line-through;
        }
        /*上划线*/
        .l2 {
            text-decoration: underline;
        }
        /*a标签（超链接）去下划线*/
        a {
            text-decoration: none;
        }
        .img1 {
            width: 500px;
            height: 400px;
        }
        /*水平对齐：参照物，a和b对齐*/
        img, span {
            vertical-align: middle;
        }
    </style>
</head>
<body>

<h1>故事介绍</h1>
<a href="">hell</a>
<p class="l1">123123421</p>
<p class="l2">123123421</p>
<p class="l3">123123421</p>

<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在第六代魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>

<p class="p2">
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块杂牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

<p class="p3">
    If you eone to wipe your tears, guess what? I'll be there. William Shakespeare
</p>

<p>
    <img src="images/img1.png" alt="" class="img1">
    <span>aaaaaaaaaaa</span>
</p>


</body>
</html>

阴影

1
2
3
4
5
6
/*text-shadow
params: 阴影颜色，水平偏移，垂直偏移，阴影半径
*/
#price {
    text-shadow: #20c1b4 10px 10px 10px;
}

超链接伪类

正常情况下，a，a:hover

1
2
3
4
5
6
7
8
9
10
11
12
/*鼠标悬浮的状态（只需要记住hover）*/
a:hover {
    color: orange;
    font-size: 20px;
}
/*鼠标按住未释放的状态*/
a:active {
    color: mediumseagreen;
}
a:visited {
    color: blueviolet;
}

列表

1
2
3
4
5
6
7
8
9
10
11
12
/*
list-style:
    none 去掉圆点
    circle 空心圆
    decimal 有序列表（数字）
    square 正方形
*/
ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

背景

背景颜色

1
background: #a0a0a0;

背景图片

法一

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            /*默认：全部平铺 repeat*/
            background-image: url("images/pdx.jpg");
        }

        .div1 {
            background-repeat: repeat-x;
        }
        .div2 {
            background-repeat: repeat-y;
        }
        .div3 {
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

法二

1
2
/*颜色 图片 图片位置 平铺方式*/
background: red url("../images/down.png") 270px 10px no-repeat;

渐变

网站

盒子模型

什么是盒子

  • margin：外边距

    所有的 body 的 margin 默认为8

  • padding：内边距

  • border：边框

边框

  • 边框的粗细
  • 边框的样式
  • 边框的颜色

实现

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
/*常见操作*/
h1, ul, li, a, body {
    /*body总有一个默认的外边距margin: 0*/
    margin: 0;
    padding: 0;
    text-decoration: none;
}
#app {
    width: 300px;
    /*border
    params：粗细，样式（实线/虚线），颜色
    */
    border: 3px solid red;
}

h2 {
    font-size: 18px;
    background: #4986ee;
    text-align: center;
    line-height: 40px;
    color: white;
}
form {
    background: #a0a0a0;
}
div:nth-of-type(1) input {
    border: 2px solid black;
}
div:nth-of-type(2) input {
    border: 2px dashed blueviolet;
}
div:nth-of-type(3) input {
    border: 2px dashed green;
}

内外边距

margin, padding 参数

  • 一个参数：上下左右
  • 两个参数：上下、左右
  • 四个参数：上、左、下、右（顺时针）

盒子的计算方式

你这个元素到底多大？

美工+前端

盒子最终大小：margin + border + padding + 内容的大小（上图内容的大小为：296*22）

示例

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外边距的妙用：居中-->
    <style>

        #app {
            width: 300px;
            /*border
            params：粗细，样式（实线/虚线），颜色
            */
            border: 3px solid red;
            padding: 0 0 0 0;
            /*margin
            一个参数：上下左右
            两个参数：上下、左右
            四个参数：上、左、下、右（顺时针）
            */
            margin: 0 auto ;
        }

        h2 {
            font-size: 18px;
            background: #4986ee;
            text-align: center;
            line-height: 40px;
            /*上下左右都为0*/
            margin: 0;
            color: white;
        }
        form {
            background: #a0a0a0;
        }
        input {
            border: 1px solid black;
        }
        div:nth-of-type(1) {
            border: 1px solid blueviolet;
            padding: 10px;
        }
    </style>
</head>
<body>
<!--div为了层次更清楚；id="app"：在vue里面id设置为app，代表一个应用，整个应用不是在body里面，而是在div里面，是需要定位的-->
<div id="app">
    <h2>会员登录</h2>
    <form action="#">
        <!--里面的属性都用div包起来-->
        <div>
            <span>姓名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

圆角边框

有4个角

1
2
3
4
5
6
7
8
9
10
11
12
div {
    width: 100px;
    height: 100px;
    border: 10px solid red;
    /*
    一个参数：所有角
    两个参数：左上 右下、右上  左下
    四个参数：左上 右上 右下 左下（顺时针方向）；而且一个参数管一个角，以及对应的两边的边长如下图
    */
    /*圆圈：圆角=宽度的一半*/
    border-radius: 50px 20px;
}

圆形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div {
    width: 50px;
    height: 50px;
    margin: 100px;
    background: red;
    /*border不在设定的长宽，所以得用border-radius也得算上去，这里给去了
    /*border: 10px solid red;*/
    border-radius: 50px 0px 0px 0px;
}
img {
    width: 50px;
    height: 50px;
    border-radius: 25px;
}

这里是半圆形：可以这样理解：border-radius只控制半径为参数的那个 1/4的圆，width 和 height 控制的是区域的大小

阴影

补充

  • img是内联元素 ，所以无法使用 margin: 0 auto; 居中

    1
    2
    3
    4
    5
    6
    7
    img {
        width: 150px;
        height: 150px;
        border-radius: 75px;
        margin: 0 auto;
        box-shadow: 10px 10px 100px yellow;
    }

    所以用 margin: 0 auto; 居中

    要求：

    • 外面是块元素
    • 块元素有固定的宽度

div的外层是body可以使用 margin: 0 auto;居中，因为body 是块元素，如果想让body里面的所有元素居中，可以这样

1
2
3
4
5
6
div {
    width: 1000px;
    border: 10px solid red;
    margin: 0 auto;
    text-align: center;
}

设置：text-align:center

  • 让内联 元素居中方法：

    • 块元素设置 text-align:center，使块内所有元素居中

    • 将内联元素设置为块元素： display: block

      1
      2
      3
      4
      5
      6
      7
      8
      img {
          width: 150px;
          height: 150px;
          border-radius: 75px;
          margin: 0 auto;
          box-shadow: 10px 10px 100px yellow;
          display: block;
      }

浮动

标准文档流

  • 不局部：自上而下的拼

  • 布局过：

  • 块级元素：独占一行，且只有块元素设置大小才能被显示

    • h1~h6
    • p
    • div
    • 列表
    • ……

  • 行内元素（内联元素）：不独占一行

    • span
    • a
    • img
    • strong
    • ……

行内元素可以包含在块级元素里面，但是块级元素不能包含在行内元素里面

display

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: inline-block;
}

span {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    /*
    inline-block 既是行内元素又是块元素（保持块元素的特性，可以写在一行）
    block 块元素
    inline 行内元素
    none 消失
    */
    display: inline-block;
}

这个也是一种实现行内元素排列的方式，但我们很多情况都是用 float

float

  • 左右浮动：float

    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
    div {
        margin: 10px;
        padding: 5px;
    }
    #app {
        border: 1px #000 solid;
    }

    .layer01 {
        border: 1px #f00 dashed;
        display: inline-block;
        float: right;
        clear:both;

    }
    .layer02 {
        border: 1px #00f dashed;
        display: inline-block;
        float: right;
        clear:both;

    }

    .layer03 {
        border: 1px #060 dashed;
        display: inline-block;
        float: right;
        clear:both;

    }

    .layer04 {
        border: 1px #666 dashed;
        font-size: 12px;    display: inline-block;
        /*float: right;*/
        line-height: 23px;
        clear:both;
    }

父级边框塌陷的问题

clear

  • right: 右侧不允许有浮动元素，如果有，排到下面去（下同）
  • left: 左侧不允许有浮动元素
  • both: 两侧允许有浮动元素
  • none:

解决方案

  1. 增加父级元素高度

    1
    2
    3
    4
    #app {
        border: 1px #000 solid;
        height: 800px;
    }

  2. 增加一个空的 div 标签，清除浮动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div id="app">
        <div class="layer01"><img src="images/1.jpg" alt=""></div>
        <div class="layer02"><img src="images/5.jpg" alt=""></div>
        <div class="layer03"><img src="images/3.jpg" alt=""></div>
        <div class="layer04">
            浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子位置
        </div>
        <div class="clear"></div>
    </div>
    1
    2
    3
    4
    5
    .clear {
        clear: both;
        margin: 0;
        padding: 0;
    }

  3. overflow

    • params:

      1
      2
      3
      hidden: 隐藏
      scroll: 滚动条
      auto:

    • 在父级元素中增加一个overflow: hidden 

      1
      2
      3
      4
      5
      #app {
          border: 1px #000 solid;
          /*height: 800px;*/
          overflow: hidden;
      }

  4. 父类添加一个伪类：after （推荐）

    可以避免空 div 

    1
    2
    3
    4
    5
    #app:after {
        content: "";
        display: block;
        clear: both;
    }

  5. 小结

    • 浮动元素后面增加空 div

      优势

      • 简单

      劣势：

      • 代码中尽量避免空 div

    • 设置父元素的高度

      优势：

      • 简单

      劣势：

      • 元素假设有了固定的高度，就会被限制

    • overflow: hidden

      优势：

      • 简单

      劣势：

      • 下拉的一些场景避免使用

      • 如果超出，就会被切掉，但是宁愿被切掉，也不要滚动条，很诡异

    • 父类添加一个伪类：after

      优势：

      • 写法稍微复杂一点，但是没有副作用，推荐使用

对比

  • display
    • 方向不可控
    • 不用管理父级边框塌陷
  • float
    • 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

定位

相对定位

  • position: reletive

  • 相对定位：相对于自己原来的位置进行偏移，相对定位的话，它仍然在标准文档流中，它原来的位置会被保留

    1
    2
    3
    4
    5
    /*距离上面-20px*/
    top: -20px;
    left: 10px;
    bottom: -10px;
    right: 20px;

  • 示例

    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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--相对定位：相对于自己原来的位置进行偏移-->
        <style>
            body {
                padding: 20px;
            }
            div {
                margin: 10px;
                padding: 5px;
                font-size: 12px;
                line-height: 25px;
            }

            #app {
                border: 1px solid #666;
                padding: 0;
            }
            #first {
                background-color: #a0a0a0;
                border: 1px dashed #b61818;
                /*相对定位：上下左右*/
                position: relative;
                /*距离上面-20px*/
                top: -20px;
                left: 10px;
            }
            #second {
                background-color: #e2cccc;
                border: 1px dashed #59b631;
            }
            #third {
                background-color: #eade86;
                border: 1px dashed #bb21d5;
                position: relative;
                bottom: -10px;
                right: 20px;
            }
        </style>

    </head>
    <body>

    <div id="app">
        <div id="first">第1个盒子</div>
        <div id="second">第2个盒子</div>
        <div id="third">第3个盒子</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app {
            width: 300px;
            height: 300px;
            border: 2px solid red;
            padding: 10px;
        }
        a {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #ea85c2;
            /*加了border位置就不准了，因为border+内容的大小才是整个元素的大小*/
            /*border: 1px solid #000000;*/
            color: white;
            text-decoration: none;
            display: block;
        }

        a:hover {
            background-color: #0c91ea;
        }

        .a2, .a4 {
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a3 {
            position: relative;
        }
        .a5 {
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="app">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>
</body>
</html>

绝对定位

  • 定位：基于xxx定位，只有上下左右
    • 没有父级元素定位的前提下，相对于浏览器定位；
    • 父级元素存在定位，我们通常相对于父级元素进行偏移；
    • 在父级元素范围内移动
  • 相对于父级或浏览器的位置进行偏移，绝对定位的话，它不在标准文档流中，它原来的位置不会被保留

固定定位

  • 定位：无论怎么走，都在固定位置

  • 示例

    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">
        <title>Title</title>
        <style>
            body {
                height: 1000px;
            }
            div:nth-of-type(1) {
                width: 100px;
                height: 100px;
                background-color: #ef67ad;
                text-align: center;
                line-height: 100px;
                /*绝对定位：相对于浏览器*/
                position: absolute;
                right: 0;
                bottom: 0;
                display: block;
            }

            div:nth-of-type(2) {
                width: 50px;
                height: 50px;
                background-color: #3383d9;
                /*固定定位：定死了；很多导航栏不动，就是通过固定定位来实现的*/
                position: fixed;
                right: 0;
                bottom: 0;
                display: block;
            }
        </style>
    </head>
    <body>

    <div>div1</div>
    <div>div2</div>

    </body>
    </html>

z-index

理解图层

实践

z-index:默认是0，最高无限；习惯用999代表最高层

  • html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>

    <div id="app">
        <ul>
            <li><img src="images/bg.webp" alt=""></li>
            <li class="tipText">学习微服务，找狂神</li>
            <li class="tipBg"></li>
            <li>时间：2021-1-1</li>
            <li>地点：卢浮宫</li>
        </ul>
    </div>
    </body>
    </html>

  • css

    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
    #app {
        width: 320px;
        padding: 0;
        margin: 0;
        overflow: hidden;
        font-size: 12px;
        line-height: 25px;
        border: 1px black solid;
    }

    ul, li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /*父级元素相对定位*/
    #app ul {
        position: relative;
    }

    .tipText, .tipBg {
        position: absolute;
        width: 320px;
        height: 25px;
        top: 167px;
        color: white;
    }

    .tipText {
        /*最低为0*/
        /*z-index: 999;*/
    }

    .tipBg {
        background: black;
        /*背景透明度*/
        opacity: 0.5;
        /*现在一般不可以用，早期可以用*/
        filter: alpha(opacity=50);
    }

动画

菜鸟教程

canvas 动画：点击这里

卡巴斯基安全监控网站：点击这里

源码之家：点击这里