封面画师：KNYT     封面ID：64325630

1. 什么是CSS

作为Java后端，需要掌握的CSS知识有：什么是CSS、CSS怎么用、CSS选择器、美化网页（文字、阴影、超链接、列表、渐变…）、盒子模型、浮动、定位和网页动画。

其中： CSS选择器是重难点！

1.1 什么是CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。——源自百度百科

总结：CSS用于表现，美化网页

1.2 CSS发展史

CSS版本 特性
CSS 1.0 简单的一些样式（字体加粗等）
CSS 2.0 DIV（块） + CSS，HTML与CSS结构分离的思想，使网页变得简单，SEO
CSS 2.1 浮动、定位
CSS 3.0 圆角、阴影、动画（需要浏览器的兼容性支持）…

1.3 CSS 快速入门

基本入门：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 规范，在<style>中编写CSS代码，每一个声明以分号结尾
        语法：
            选择器{
                声明1;
                声明2;
                声明3;
            }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <h1>我是标题</h1>
</body>
</html>

规范建议：

CSS规范建议

CSS的优势：

  1. 内容和表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式非常丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO，容易被搜索引擎收录

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

    <!-- 外部样式 -->
    <!-- h1{
        color: yellow;
        } 
    -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 内部样式 -->
    <style>
        h1{
            color: green;
        }
    </style>
    
</head>
<body>
    <!-- 优先级： 就近原则 -->
    <!-- 行内样式 在标签元素中编写一个style属性以编写样式 -->
    <h1 style="color: red;">我是标题</h1>
</body>
</html>

拓展：外部样式两种写法

  • 链接式

    1
    2
    <!-- 外部样式 -->
    <link rel="stylesheet" href="css/style.css">

  • 导入式（网页样式复杂时，先加载网页骨架在进行渲染，因此不推荐使用）

    1
    2
    3
    4
    <!--CSS 2.1 的版本特性-->
    <style>
        @import url("css/style.css");
    </style>

2. 选择器

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

2.1 基本选择器

种类

  1. 标签选择器：选择一类标签。格式：标签{}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 标签选择器会选择到页面上所有的标签元素 */
        h1{
            color:#090b83;
            background: #3cbda6;
            border-radius: 3px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
    <h1>我是一级标题</h1>
    <h1>我是一级标题</h1>
    <p>我是一个段落</p>
</body>
</html>
  1. 类 选择器（class）：选择所有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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 类选择器的格式 .class的名称{} 
            好处：可以多个标签归类，是同一个class，可以复用
        */
        .title1{
            color: royalblue;
        }
        .title2{
            color: #2f11d880;
        }
        .title3{
            color: #0d285a80;
        }
    </style>
</head>
<body>
    <h1 class="title1">标题1</h1>
    <h1 class="title2">标题2</h1>
    <h1 class="title1">标题3</h1>
</body>
</html>
  1. 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* id选择器: id必须保证全局唯一！
            #id名称{}
            不遵循就近原则，权重固定
            id 选择器 > class 选择器 > 标签选择器
        */
        #title1{
            color: pink;
        }
        .style1{
            color: rebeccapurple;
        }
        h1{
            color: royalblue;
        }
    </style>
</head>
<body>
    <h1 id="title1" class="style1">标题1</h1>
    <h1 class="style1">标题2</h1>
    <h1 class="style1">标题3</h1>
    <h1>标题4</h1>
    <h1>标题5</h1>
</body>
</html>

基本选择器优先级

不遵循就近原则！

id > class > 标签

2.2 层次选择器

  1. 后代选择器： 在某个标签后面的所有指定标签或者说某个标签内的所有指定标签
1
2
3
4
5
/* 后代选择器 */
/* body 下的所有 p */
body p{
    background: red;
}
  1. 子选择器： 在某个标签下的所有第一类指定子标签
1
2
3
4
5
/* 子选择器 */
/* body 下的 第一个 p */
body>p{
    background: royalblue;
}
  1. 相邻兄弟选择器： 当前选中标签的第一个向下相邻的标签
1
2
3
4
5
/* 相邻兄弟选择器：只有一个，向下相邻 */
/* class 为 active 的标签向下的第一个 p */
.active + p{
    background: saddlebrown;
}
  1. 通用选择器： 当前选中标签的向下的所有指定标签
1
2
3
4
5
/* 通用兄弟选择器：当前选中元素的向下的所有兄弟元素 */
/* class 为 active 的标签向下的所有 p */
.active~p{
    background: green;
}

理解：

可以使用生活中的辈分来理解。

假设有如下辈分关系：太爷爷、（大）爷爷、二爷爷、三爷爷、四爷爷、你的爸爸以及你。

  • 后代选择器：假设选中了太爷爷，那么太爷爷的所有后台就会受影响。

  • 子选择器：假设选中了太爷爷，那么太爷爷的所有儿子都会受影响。即：爷爷、二爷爷、三爷爷、四爷爷会受影响，但是你的爸爸和你不会受影响。

  • 相邻兄弟选择器：假设选中了二爷爷，那么有且仅有三爷爷受影响（相邻且向下）。

  • 通用选择器：假设选中了二爷爷，那么你所有爷爷都会受影响，但是你的爸爸与你不会受影响。

本节代码

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* p{
            background: #02ff81;
        } */
        /* 后代选择器 */
        /* body p{
            background: red;
        } */
        /* 子选择器 */
        /* body>p{
            background: royalblue;
        } */
        /* 相邻兄弟选择器：只有一个，向下相邻 */
        /* .active + p{
            background: saddlebrown;
        } */
        /* 通用兄弟选择器：当前选中元素的向下的所有兄弟元素 */
        .active~p{
            background: green;
        }
    </style>
</head>
<body>
    <p>p0</p>
    <p class="active">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="active">p7</p>
    <p>p8</p>
</body>
</html>

2.3 结构伪类选择器

CSS伪类是用来添加一些选择器的特殊效果。

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

简单使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* ul的第一个子元素*/
        ul li:first-child{
            background: indigo;
        }
        /* ul的最后一个子元素 */
        ul li:last-child{
            background: lightblue;
        }
        /* 
            选择当前p元素的父级元素，选中父级元素的第n个子元素，且是当前元素是p元素才生效
        */
        /* 设置p元素的父元素下的第2个子元素的每个p的样式 */
        p:nth-child(2){
            background: #510feb;
        }
        /* 选中父元素下第二个类型为p的元素 */
        /* 设置p元素的父元素下第2个p元素的每个p */
        p:nth-of-type(2){
            background: #97eb0f;
        }
    </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>

运行结果：

结构伪类选择器

nth-child(n)与nth-of-type(n)

x:nth-child(n)解析：

选中x元素的父元素，父元素下的第n个子元素（这个子元素类型是x，如果不是，样式不生效）

x:nth-of-type(n)解析：

选中x元素的父元素，父元素下第n个x元素

2.4 属性选择器（常用）

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

        /* 存在某一属性的元素    格式： x[]{}
            []内的属性名格式： 属性名 = 属性值(正则)
            = 绝对等于
            *= 包含
            ^= 开头匹配
            $= 结尾匹配
        */
        /* a[id]{
            background: yellow;
        } */
        /* a[id=first]{
            background: yellowgreen;
        } */

        /* class中有links的元素 */
        /* a[class*=links]{
            background: yellow;
        } */

        /* 选中href中以http开头的元素 */
        /* a[href^=http]{
            background: blueviolet;
        } */

        a[href$=jpg]{
            background: seashell;
        }
    </style>
</head>
<body>
    <p class="demo">
        <a href="http://www.baidu.com" class="links item first" id="first">1</a>
        <a href="http://www.bilibili.com" class="links item active" target="_blank" title="test">2</a>
        <a href="images/123.html" class="links item" >3</a>
        <a href="images/123.png" class="links item " >4</a>
        <a href="images/123.jpg" class="links item " >5</a>
        <a href="abc" class="links item " >6</a>
        <a href="/a.pdf" class="links item " >7</a>
        <a href="/abc.pdf" class="links item " >8</a>
        <a href="abc.doc" class="links item " >9</a>
        <a href="abcd.doc" class="links item last" >10</a>
    </p>
</body>
</html>

运行结果：

属性选择器

3. 网页美化元素

3.1 美化网页的原因

  • 有效地传递页面信息
  • 美化网页，使页面更美观，吸引用户使用
  • 凸显页面的主题
  • 提高用户体验

<span>标签：重点要突出的字，约定使用<span></span>包裹起来。

3.2 字体样式

常用字体样式示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 
font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色
-->
<style>
    body {
        font-family: 'Times New Roman',楷体;  
        color: sienna;
    }
    h1{
        /* em 表示字符缩进大小 */
        font-size: 50px;
    }
    .p1{
        font-weight: bold;
    }
</style>

颜色代码大全与英文颜色代码表：

CSS 颜色代码大全 CSS颜色对照表 推荐

颜色代码：网页颜色代码大全及色彩搭配教程

3.3 文本样式

  • 文本颜色 color ( rgb rgba)
  • 文本对齐方式 text-align:center;
  • 首行缩进 text-indent:2em;
  • 行高 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <!-- 
        颜色：
            单词
            RGB（0~F）
            RGBA    (A值范围：0~1，表示透明度)

        text-align：排版，常用居中
        text-indent: 2em;   段落首行缩进2个字符
        height: 30px;
        line-height: 30px;
            行高和块高一致就可以上下居中
     -->
    <style>
        h1{
            color: rgba(0, 255, 255, 0.9);
            text-align: center;
        }
        .p1{
            /* em 表示字符缩进大小，2em就表示缩进两个字符 */
            text-indent: 2em;
        }
        .p3{
            background: lightskyblue;
            height: 30px;
            line-height: 30px;
        }
        /* 下划线 */
        .l1{
            text-decoration: underline;
        }
        /* 中划线 */
        .l2{
            text-decoration: line-through;
        }
        /* 上划线 */
        .l3{
            text-decoration: overline;
        }
        /*  水平对齐，需要参照物  */
        img,span{
            vertical-align: middle;
        }
        /* a标签去下划线 */
        a{
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="#">123</a>
    <p class="l1">123123</p>
    <p class="l2">123123</p>
    <p class="l3">123123</p>
    <h1>故事介绍</h1>
    <p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
    </p>
    <p> 在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
    </p>
    <p class="p3">
        “He was my North, my South, my East and West, My working week and my Sunday rest, My noon, my midnight, my talk, my song; I thought that love would last forever: I was wrong.”
    </p>
    <p>
        <img src="images/bilibili.png" alt="哔哩哔哩">
        <span>哔哩哔哩弹幕网</span> 
    </p>  
</body>
</html>

3.4 阴影

1
2
3
4
/* text-shadow :阴影颜色 水平偏移 垂直偏移 阴影半径 */
#price{
    text-shadow: lightblue 10px -10px 2px ;
}
偏移位置解析

3.5 超链接伪类

使用示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 默认的颜色 */
a{
    text-decoration: none;
    color: black;
}
/* 鼠标悬浮至超链接上(重要！重要！) */
a:hover{
    color: orange;
    font-size: 20px;
}
/* 鼠标按住未释放的状态 */
a:active{
    color: green;
}

3.6 列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* ul li */
/* 
    list-style:
        none:去掉圆点
        circle: 空心圆
        decimal:数字
        square:正方形
*/
/* ul{
    background: silver;
} */
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7 背景

背景：背景颜色、背景图片

背景图片示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/myImages.jpg");
    /* 默认是全部平铺的 repeat */
}
.div1{
    /* x方法重复 */
    background-repeat: repeat-x;
}
.div2{
    /* y方向重复 */
    background-repeat: repeat-y;
}
.div3{
    /* 不重复 */
    background-repeat: no-repeat;
}

练习：

样式结果：

列表背景练习

代码展示：

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="nav">
        <h2 class="title">全部商品分类</h2>
        <ul>
            <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">音像</a></li>
            <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
            <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
            <li><a href="#">家具</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
            <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个性化妆</a></li>
            <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
            <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
            <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<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
#nav{
    width: 300px;
    background: silver;
}

h2{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /* 颜色 图片 图片位置 平铺方式 */
    background: red url("../images/a.png") 270px 10px no-repeat;
}

/* ul li */
/* 
    list-style:
        none:去掉圆点
        circle: 空心圆
        decimal:数字
        square:正方形
*/
/* ul{
    background: silver;
} */
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/b.png") ;
    background-repeat: no-repeat;
    background-position: 236px 2px;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.8 渐变

渐变颜色参考地址：Grabient

1
2
background-color: #08AEEA;
background-image: linear-gradient(144deg, #08AEEA 0%, #2AF598 100%);

4. 盒子模型

4.1 什么是盒子模型

盒子模型

margin：外边距

padding：内边距

border：边框

4.2 边框

边框属性：粗细、样式、颜色…

边框

4.3 内外边距

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
         /* 很多标签总有一个默认的外边距，我们一般将其设置为0 */
        body{
            margin: 0;
        }
        /* border: 粗细 样式 颜色 */
        #box{
            width: 300px;
            border: 1px solid red ;
            /*设置box居中*/
            margin: 0 auto;
        }
        /* 
            顺时针旋转
            margin:0    全为0
            margin:0 1px    上下为0，左右为1px
            margin:0 1px 2px 3px    顺时针方向
        */
        h2{
            font-size: 16px;
            background-color: #3cbda6;
            line-height: 30px;
            margin: 0;
            color: white;
            margin:0 1px 2px 3px;
        }
        form{
            background: #3cbda6;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>会员登录</h2>
        <form action="#">
            <div>
                <span>用户名：</span>
                <input type="text">
            </div>
            <div>
                <span>密码：</span>
                <input type="text">
            </div>
            <div>
                <span>邮箱：</span>
                <input type="text">
            </div>
        </form>
    </div>
</body>
</html>

盒子的计算方式：元素到底多大？

盒子模型

margin + border + padding + 内容宽度

4.4 圆角边框

首先清楚边框有4个角。

参考链接：CSS3属性border-radius绘制多种多样的图形

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    /* 左上 右上 右下 左下 ，顺时针方向 
    border-radius: 50px;   四个方向全部50px
    border-radius: 50px 20px; 左上50px，右下20px
    */
    /* 圆圈 ：圆角 = 半径！ */
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        border-radius: 78px;
    }
</style>

4.5 盒子阴影

margin: 0 auto：可以使块居中，但有前提： 块元素，块元素有固定的宽度

示例代码：

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>Document</title>
    <style>
        div{
            width: 160px;
            height: 100px;
            border: 10px solid rgb(10, 131, 187);
            box-shadow: 10px 10px 100px rgb(16, 123, 194);
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 
        margin: 0 auto;
        居中前提： 块元素，块元素有固定的宽度
    -->
        <div>
            <img src="./images/bilibili.png" alt="bilibili">
        </div>
</body>
</html>

5. 浮动

5.1 标准文档流

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

标准文档流

参考链接：CSS标准文档流

块级元素：独占一行

1
h1 ~ h6		p	div		列表...

行内元素：不独占一行

1
span 	a	img 	strong...

行内运输可以被包含在块级元素中，反之，则不可以~

5.2 display

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    /* display
    block：块元素
    inline：行内元素
    inline-block：是块元素，但可以内敛在一行
    */
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
</style>

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

5.3 float

左右浮动代码示例：

1
2
3
4
5
6
7
8
<div id="father">
    <div class="layer01"><img src="images/1.jpg" alt=""></div>
    <div class="layer02"><img src="images/2.jpg" alt=""></div>
    <div class="layer03"><img src="images/3.jpg" alt=""></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的边缘碰到包含框或另一个浮动盒子为止。
    </div>
</div>
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
div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #f00 dashed;
    display: inline-block;
    float: right;
}
.layer02{
    border: 1px #00f dashed;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
}

5.4 父级边框塌陷

使用clear清除浮动。

参考链接：关于CSS中的clear:both的理解和错误的用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
clear: right;	右侧不允许有浮动元素，如果有，就排到浮动元素下方
clear: left;	左侧不允许有浮动元素，如果有，就排到浮动元素下方
clear: both;	左右两侧都不允许有浮动元素，如果有，就排到浮动元素下方
clear: none;	左右两侧允许有浮动元素
*/
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
    clear: both;
}

解决方案

  • 增加父级元素高度
1
2
3
4
#father{
    border: 1px #000 solid;
    height: 800px;
}
  • 增加一个空的div标签并清除浮动
1
2
3
4
5
6
7
<div class="clear"></div>

.clear{
	clear: both;
	margin: 0;
	padding: 0;
}
  • overflow：在父级元素中添加一个 overflow: hidden;
  • 在父类中添加一个伪类：after
1
2
3
4
5
#father:after{
    content: '';
    display: block;
    clear: both;
}

小结

  1. 浮动元素后添加空div

    操作简单，但在代码中应该尽量避免空div

  2. 设置父元素的高度

    操作简单，但是元素假设有了固定的高度，就会被限制

  3. overflow:hidden

    操作简单，但下拉的一些场景应避免使用

    参考资料：为什么"overflow:hidden"能清除浮动的影响 BFC是什么

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

    写法较前三种较复杂，但是没有副作用

5.5 display与float的区别

  • display：排列的方向不可以控制
  • float：排列方向可控，但浮动起来时可能会脱离标准文档流，所以需要解决父级边框塌陷的问题

6. 定位

6.1 相对定位 relative

相对定位场景

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 相对于原来的位置进行偏移 -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
            position: relative;  /*相对定位：上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #255099;
            border: 1px solid #255066;
        }
        #third{
            background-color: #1c6699;
            border: 1px solid #1c6615;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

相对定位：position: relative;

相对于原来的位置进行指定数字的偏移，使用了相对定位的组件仍然在标准文档流中，原来的位置会被保留。

1
2
3
4
top: -20px;
left: 20px;
bottom: -10px;
right: 20px;

以top:-20px为例，表示某一组件相对于上方（top）偏移了-20px，即：组件向上移动了20px。如果改为top:20px，表示表示某一组件相对于上方（top）偏移了20px，即：组件向下移动了20px。

偏移量可以理解为彼此间的距离。偏移20px，表示彼此距离20px；偏移-20px，表示彼此靠近了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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practice</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: pink;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: lightblue;
        }
        .a2, .a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
    <div id="box">
        <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>

6.2 绝对定位 absolute

定位：基于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
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
        }
        #second{
            background-color: #255099;
            border: 1px solid #255066;
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: #1c6699;
            border: 1px solid #1c6615;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

绝对定位：position: absolute;

  1. 没有父级元素的前提下，相对于浏览器进行定位
  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
  3. 在父级元素的范围内进行移动

相对于父级或浏览器的位置进行指定数字的偏移，使用了绝对定位的组件不在标准文档流中，原来的位置不会被保留。

6.3 固定定位 fixed

固定定位场景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            height: 1000px;
        }
        /* 绝对定位：因为不存在父级元素，因此相对于浏览器定位 */
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        /* 固定定位 */
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

6.4 z-index

明白图层的概念：

图层

z-index：默认是0，最高无限制

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="content">
        <ul>
            <li><img src="images/spring.png" alt=""></li>
            <li class="tipText">Spring实战</li>
            <li class="tipBg"></li>
            <li>作者：克雷格·沃斯</li>
            <li>出版时间：2020</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
#content{
    width: 360px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/* 父级元素相对定位 */
#content ul{
    position: relative;
}
.tipText, .tipBg{
    position: absolute;
    width: 360px;
    height: 25px;
    top: 307px;
}

.tipText{
    color: white;
    z-index: 999;
}
.tipBg{
    background: #000;
    /* 背景透明度 */
    opacity: 0.5;
    filter: Alpha(opacity=0.5);
}

7. 动画

参考链接：HTML5 Tricks