一、什么是CSS

如何学习

  1. CSS是说明
  2. CSS怎么用
  3. CSS选择器（重点+难点）
  4. 美化网页（文字、阴影、超链接、列表、渐变）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效）

1、什么是CSS

Cascading Style Sheet层叠样式表

CSS：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

2、发展史

CSS1.0

CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1：浮动，定位

CSS3.0：圆角、阴影、动画…浏览器兼容性~

CSS的优势：

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

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--
        规范，<style>可以编写CSS的代码，每一个声明最好以“;”结尾
        语法：
            选择器{
                    声明1;
                    声明2;
                    声明3;
                }
        -->
        <style>
            h1 {
                color : crimson;
            }
        </style>

    </head>
    <body>
        <h1>CSS测试</h1>
    </body>
</html>

建议使用如下方式：将CSS代码和HTML代码分离，通过link标签引入外部CSS文件

image-20210320175924839

4、CSS的三种导入方式

  • 行内样式：写在标签里面的样式
  • 内部样式：直接写在标签中的样式
  • 外部样式：导入外部的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>CSS的三种导入方式</title>

        <!--内部样式表-->
        <style>
            h1 {
                color : green;
            }
        </style>
        <link rel="stylesheet" href="../css/style.css">
    </head>
    <body>

        <!--样式表优先级：就近原则，谁离标签进，最后的样式就会是谁的，离的最近的是行内样式（在标签元素中）-->

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

    </body>
</html>

拓展：外部样式的两种写法

  • 链接式：
1
2
<!--外部样式-->
    <link rel="stylesheet" href="css/style.css" />
  • 导入式：@import是CSS2.1特有的！
1
2
3
4
<!--导入式-->
    <style>
        @import url("css/style.css");
    </style>

二、选择器

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

1、基本选择器

  • 标签选择器：选择一类标签 标签{}
  • 类 选择器class：选择所有class一致的标签，跨标签，格式：.类名{}
  • id 选择器：全局唯一，格式：#id名{}
  • 优先级：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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        <style>
            /*标签选择器，会选中页面中所有标签的元素*/
            h1 {
                color            : white;
                background-color : #00bfff;
                border-radius    : 25px;
            }

            /*类选择器的格式 .class的名称{}
                好处：可以多个标签归类，是同一个class，可以复用
            */
            .one {
                background-color : #daddf6;
            }

            /*id选择器：id必须保证全局唯一
                #id名称{}
                不遵循就近原则，优先级是固定的
                id选择器 > 类选择器  >  标签选择器
            */
            #two {
                background-color : #58b6b6;
            }

        </style>
    </head>
    <body>
        
        <h1 class="one">Java</h1>
        <h1 id="two">JavaWeb</h1>
        <h1>Spring</h1>

    </body>
</html>

2、层次选择器

  • 后代选择器：在某个元素的后面

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

  • 子选择器（属于同一代）

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

  • 相邻的兄弟选择器（同辈）

    1
    2
    3
    4
    /*相邻兄弟选择器：只有一个，相邻（向下）*/
    .active+p{
    background: red
    }

  • 通用选择器

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

层次选择器测试：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>

        <style>
            /*后代选择器，只要是是后代的都可以选择到*/
            /* body标签里面的所有p标签都会使用如下CSS样式 */
            body p {
                background-color : red;
            }

            /* 子选择器，只能隔一级，父子类，超过父类就不能用了 */
            /* body下的子类，只要不是在body下的p标签就不会执行CSS代码，比如body下的ul标签下的p标签不是子类 */
            body > p {
                background-color : green;
            }

            /* 兄弟（弟弟）选择器 */
            /* 紧挨该标签的同类标签，要是两个标签下有其他标签便不适用兄弟选择器 */
            .active + p {
                background-color : yellow;
            }

            /* 通用选择器 */
            .active ~ p {
                background-color : deepskyblue;
            }
        </style>

    </head>
    <body>
        <p>p1</p>
        <p class="active">p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p4</p>
            </li>
        </ul>

    </body>
</html>

3、结构 伪类选择器

具体使用上网查询

1
2
3
4
5
6
7
8
9
10
11
/* 未访问的链接 */
a:link { color: #FF0000;}

/* 已访问的链接 */
a:visited { color: #00FF00;}

/* 鼠标悬停链接 */
a:hover { color: #FF00FF;}

/* 已选择的链接 */
a:active { color: #0000FF;}
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>伪类选择器</title>
        <style>
            /*ul的第一个子元素*/
            ul li:first-child {
                background : aqua;
            }

            /*ul的最后一个子元素*/
            ul li:last-child {
                background : blue;
            }

            /*选中p1：定位到父元素，选择当前的第一个元素
                选择当前p元素 的父级元素，选中父级元素的第一个，并且是当前元素才生效！
            */
            p:nth-child(1) {
                background : orange;
            }

            /*选中父元素下的，第2个p元素*/
            p:nth-of-type(2) {
                background : red;
            }

            /*鼠标移动到该标签上会改变其背景颜色*/
            h1:hover {
                background-color : #f2f2f2;
            }
        </style>

    </head>
    <body>
        <h1>标签体</h1>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>

    </body>
</html>

4、属性选择器（常用）

1
2
3
4
=表示绝对等于
*=表示包含
^=表示以...开头
$=表示以...结尾
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>

        <style type="text/css">
            .demo a {
                float            : left;
                display          : block; /*边城块级元素*/
                height           : 50px;
                width            : 50px;
                border-radius    : 10px;
                background-color : deepskyblue;
                text-align       : center;
                color            : white;
                font-weight      : bold;
                text-decoration  : none;
                margin-right     : 20px;
                line-height      : 50px;
            }

            /*
            属性名，属性名=属性值（正则）
            =表示绝对等于
            *=表示包含
            ^=表示以...开头
            $=表示以...结尾
            */

            /* 存在id属性的元素  a[]{}*/
            /* a[id]{
                 background: red;
             }*/

            /*id=first的元素*/
            /* a[id=first]{
                 background: aqua;
             }*/

            /* class中的links元素一定为：links item2 first2 */
            /*a[class = "links item2 first2"]{
                background: orange;
            }*/

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

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

        </style>

    </head>
    <body>

        <p class="demo">
            <a href="http://www.baidu.com" class="links item fist" id="first">1</a>
            <a href="" class="links item active" target="_blank" title="test">2</a>
            <a href="index.html" class="links item">3</a>
            <a href="312" class="links item">4</a>
            <a href="312" class="links item">5</a>
            <a href="123" class="links item">6</a>
            <a href="321" class="links item">7</a>
            <a href="123" class="links item">8</a>
            <a href="213" class="links item ">9</a>
            <a href="123" class="links item last">10</a>
        </p>
    </body>
</html>

三、美化网页元素

1、为什么要美化

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

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>span标签</title>
        <style type="text/css">
            #span1 {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        欢迎学习<span id="span1">Java</span>
    </body>
</html>

2、字体样式

font属性：该属性有六个值，可以按顺序设置如下属性：

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
1
2
3
4
body{
    font:italic bold 12px/20px arial,sans-serif;
}

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>字体样式</title>
        <!--
        font-family：字体样式（如：微软雅黑）
        font-size：字体大小
        font-weight：字体粗细
        color：字体颜色
        -->
        <style type="text/css">
            body {
                /*当自己输入的字体在电脑上没有的时候，就会使用默认的字体serif*/
                /* 第一个参数是想要展示的字体，第二个参数是当第一个字体电脑上不存在的时候才会使用第二个输入的字体 */
                font-family : 楷体, serif;
            }

            h1 {
                font-size : 30px;
            }

            .p1 {
                font-weight : bold;
            }
        </style>

    </head>
    <body>

        <h1>故事介绍</h1>

        <p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！</p>

        <p> 即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。</p>

        <p> 魁拔纪元1664年，天神经过精确测算后，在第六代魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。</p>

        <p>很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>

    </body>
</html>

3、文本样式

  • 颜色：color（rgb，rgba）

  • 文本对齐方式：text-align：center

  • 首行缩进：text-indent：2em

  • 行高：line-height：设置了高度之后，此处的值需要和height的值一样就会上下居中；（当行文字上下居中）

  • 下划线：text-decoration（underline：下划线、line-through：中划线、overline：上划线、none：超链接去下划线）

  • 文本图片水平对齐：使图片和文字对齐（这个是相对于谁居中，如下代码为字体相对于图片）

    1
    2
    3
    img, span {
        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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本样式</title>

        <style type="text/css">
            h1 {
                /*
                rgb()和rgba()的区别：rgb相对于rgba少了一个参数，rgba的第四个参数代表透明度，值的范围为（0~1）
                */
                /*color : #00ff00;*/
                /*color: rgb(0,255,255);*/
                color           : rgba(0, 255, 255, 0.3);
                text-align      : center;
                text-decoration : underline black;
                /*
                underline：下划线
                line-through：中划线
                overline：上划线
                none：超链接去下划线
               */
            }

            .p1 {
                /*缩进：1em相当于缩进一个字体*/
                text-indent : 2em;
            }

            .p3 {
                background-color : dodgerblue;
                color            : white;
                height           : 30px;
                line-height      : 30px; /* 行高和高度一样就会在块元素的上下剧中 */
            }

        </style>

    </head>
    <body>

        <h1>故事介绍</h1>

        <p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！</p>

        <p class="p3">很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>

    </body>
</html>

4、阴影

image-20210321094337503

5、超链接伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
	a{/*超链接有默认的颜色*/
		text-decoration:none;
		color:#000000;
	}
	a:hover{/*鼠标悬浮的状态*/
		color:orange;
	}
	a:active{/*鼠标按住未释放的状态*/
		color:green
	}
	a:visited{/*点击之后的状态*/
		color:red
	}
</style>

如下列举了部分，其他使用可以上网查询

正常情况下：a:hover

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*鼠标悬浮的颜色*/
a:hover {
    color            : white;
    background-color : deepskyblue;
}

a:active, input:active {
    /* 当鼠标点击后的效果，或被选中的效果 */
    color : green;
}


p {
	/*	第一个参数：表示水平偏移
		第二个参数：表示垂直偏移
		第三个参数：表示模糊半径
		第四个参数：表示颜色
	*/
	text-shadow:5px 5px 5px 颜色
}

6、列表

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
/*list-style{
	none:去掉原点
	circle：空心圆
	decimal：数字
	square：正方形
}*/
ul li{
	height:30px;
	list-style:none;
	text-indent:1em;
}
a{
	text-decoration:none;
	font-size:14px;
	color:#000;
}
a:hover{
	color:orange;
	text-decoration:underline
}
/*放在div中，作为导航栏*/
<div id="nav"></div>
#nav{
	width:300px;
}

淘宝侧边栏

  • 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表练习</title>
        <link rel="stylesheet" href="../css/11、列表练习.css">
    </head>
    <body>
        <div id="nav">
            <h2 class="title">全部商品分类：</h2>
            <ul>
                <li>
                    <a href="#">家用电器</a>
                </li>

                <li>
                    <a href="#">手机<span>/</span></a>

                    <a href="#">运营商</a><span>/</span>

                    <a href="#">数码</a>
                </li>

                <li>
                    <a href="#">电脑</a> <span>/</span>

                    <a href="#">办公</a>
                </li>

                <li>
                    <a href="#">家居</a><span>/</span>

                    <a href="#">家具</a><span>/</span>

                    <a href="#">家装</a><span>/</span>

                    <a href="#">厨具</a>
                </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
body {
    background-color : #e9e6e7;
}

#nav {
    background-color : white;
    width            : 260px;
    height           : 1000px;
    border-radius    : 20px;
   margin: 0 30%;

}

.title {
    font-size   : 18px;
    width       : 260px;
    color       : #ff6200;
    border-radius: 20px;
    text-align  : center;
    font-weight : inherit;
    background  : white url("../resources/image/下.webp") 225px no-repeat;
}

ul li {
    list-style          : none;
    line-height         : 2em;
    background-image    : url("../resources/image/右.webp");
    background-repeat   : no-repeat;
    background-position : 185px 0;
}

li:hover, li a:hover {
    background-color : #ffe4dc;
    color            : #ff6200;

}

a {
    color : #666666;
}

7、背景

  • 分开设置
1
2
3
4
background-image:url("");/*默认是全部平铺的*/
background-repeat:repeat-x/*水平平铺*/
background-repeat:repeat-y/*垂直平铺*/
background-repeat:no-repeat/*不平铺*/
  • 综合设置
1
2
background:red url("图片相对路劲") 270px 10px no-repeat
background-position：/*定位：背景位置*/

背景使用

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

        <style>
            div {
                width            : 1000px;
                height           : 700px;
                border           : 1px solid red;
                background-image : url("../resources/image/图片2.webp");
            }

            .div1 {
                background-repeat : repeat-x;
            }

            .div2 {
                background-repeat : no-repeat;
            }

            .div3 {
                background-repeat : repeat-y;
            }
        </style>

    </head>
    <body>

        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>

    </body>
</html>

8、渐变（了解）

径向渐变、圆形渐变

可以去网上直接copy代码：网址：（https://www.grabient.com）

四、盒子模型

1、什么是盒子模型

image-20210321112018246

  • 外边距：margin
  • 内边距：padding
  • 边框：border

2、边框

  • 边框的粗细
  • 边框的样式
  • 边框的颜色
1
border：粗细 样式 颜色

3、内外边距

一个盒子的总大小计算：margin + padding + border + 内容宽度

  • 内边距：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /*
    需要是块级元素才能使用margin:0 auto 元素实现居中
    */
    margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
    /*例1：居中*/
    margin:0 auto /*auto表示左右自动*/
    /*例2：*/
    margin:4px/*表示上、右、下、左都为4px*/
    /*例3*/
    margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

  • 外边距：

    1
    2
    3
    4
    5
    6
    7
    margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
    /*例1：居中*/
    margin:0 auto /*auto表示左右自动*/
    /*例2：*/
    margin:4px/*表示上、右、下、左都为4px*/
    /*例3*/
    margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

4、圆角边框——border-radius

border-radius有四个参数（顺时针），左上开始

圆圈：圆角=半径

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>圆角边框</title>
        <!--
        四个值：左上 右上 左下 顺时针方向
        两个值：（左上，右下） （左下，右上）
		一个值：四个角

        圆圈(头像变圆)：值 = （margin + padding + border + 内容宽度）/2
        如下想要代码想要边城圆 值 = (100+10+10)/2 = 60px

        扇形： 值 = 0 （margin + padding + border + 内容宽度） 0 0
        如下代码扇形值为：border-radius : 0 (100+10+10) 0 0;
        -->
        <style>
            div {
                width         : 100px;
                height        : 100px;
                border        : 10px solid red;
                border-radius : 0 60px 60px 0;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

5、阴影

1
2
3
#bo{
    box-shadow: h-shadow v-shadow blur spread color inset;
}
值 说明
h-shadow 必须的。水平阴影的位置，允许负值
v-shadow 必须的，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

五、浮动

1、标准文档流

标准文档流设计出来的网页没有布局，就是自上而下的，开发不能这样开发，应该需要来设计

标准文档流中，块级元素会单独独占一行，行内元素不会独占一行

下图的右边是标准文档流：PC端开发出来的网站不应该是标准文档流的形式，应该如左图一样是布局好的，这时候就会使用其他技术来实现

image-20210321144802856

块级元素：独占一行

  • 独占一行，其宽度自动填满其父元素宽度（即使设置了宽度仍然是独占一行的）
  • 多个块状元素标签写在一起，默认排列方式为从上至下
  • 高度，行高，外边距（margin）以及内边距（padding）都可以控制
  • div h1-h6 p ul ol li nav aside header footer section article address form table

行内元素：不独占一行

  • 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化
  • 设置行高有效，等同于给父级元素设置行高
  • 高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效上下无效。
  • 内边距（padding）设置上下从显示效果是增加的，但其实设置时无效的，并不会影响周围的元素
  • 行内元素中不能放块级元素，a 链接里面不能再放链接
  • span、a、label、i 、 b 、 strong 、 em 、 del(删除线) 、 ins(下划线) 、 sub(下标) 、 sup（上标）

行内块元素：

  • 高度、行高、外边距以及内边距都可以控制。
  • 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的font-size为0，才会消除间隙
  • button input textarea select img

注： 行内元素可以包含在块级元素中，反之则不可以。

2、display

  1. block：块元素
  2. inline：行内元素
  3. inline-block：是块元素，但是可以内联，在一行
  4. none

块级元素：独占一行

  • 独占一行，其宽度自动填满其父元素宽度（即使设置了宽度仍然是独占一行的）
  • 多个块状元素标签写在一起，默认排列方式为从上至下
  • 高度，行高，外边距（margin）以及内边距（padding）都可以控制
  • div h1-h6 p ul ol li nav aside header footer section article address form table

行内元素：不独占一行

  • 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化
  • 设置行高有效，等同于给父级元素设置行高
  • 高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效上下无效。
  • 内边距（padding）设置上下从显示效果是增加的，但其实设置时无效的，并不会影响周围的元素
  • 行内元素中不能放块级元素，a 链接里面不能再放链接
  • span、a、label、i 、 b 、 strong 、 em 、 del(删除线) 、 ins(下划线) 、 sub(下标) 、 sup（上标）

行内块元素：

  • 高度、行高、外边距以及内边距都可以控制。
  • 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的font-size为0，才会消除间隙
  • button input textarea select img

3、float

  • 左浮动：float：left
  • 右浮动：float：right

4、父级边框塌陷的解决

解决边框塌陷的问题：

  • 方案一：增加父级元素的高度，使父元素不会因为浮动造成边框塌陷
1
2
3
4
#father{
    border:1px #black solid;
    height:800px
}
  • 方案二：在最后增加一个空的div标签，清除浮动，将最后一个div设置为清除左右浮动，那么就不会因为前面的浮动而导致父标签边框塌陷
1
2
3
4
5
6
<div class="clear"></div>
.clear {
    clear   : both;
    margin  : 0;
    padding : 0;
}
  • 方案三：在父级元素中增加一个overflow：hidden
1
overflow: hidden;/* 将超过的部分隐藏，在有浮动的时候父元素会自动溢出，不会造成边框塌陷 */
  • 方案四：父类添加一个伪类：after（建议使用）
1
2
3
4
5
6
.father:after {
    content : "";	/* 添加一个空的内容 */
    display : block;/* 将content : "";内容变成一个块元素 */
    clear   : both; /* 添加了内容之后再清除浮动 */
    /* 在父元素标签失效之后才会执行 */
}
  • 小结：
    • 浮动元素后面添加空的div
      • 简单，代码中尽量避免空div
    • 设置父元素的高度：
      • 简单，元素假设有了固定的高度就会被限制
    • overflow：hidden
      • 简单，下拉的一些场景避免使用
    • 在父类添加伪类：after（推荐）（在不改变代码的前提下添加新的代码实现需求），建议使用
      • 写法稍微复杂点，但是没有

5、对比

  • display：方向不可控制，不用管父级元素边框塌陷的问题
  • float：浮动起来会脱离标准文档流（可以自定义文档页面），所以要解决父级边框塌陷的问题
  • 共同：都可以让元素在一行

六、定位

1、相对定位

1
2
3
4
5
6
/*相对定位：*/
position : absolute;
top      : 20px;
left     : px;
right    : px;
bottom   : px;

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

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>默认情况</title>
        <!--相对定位：相对于自己原来的位置进行偏移-->
        <link rel="stylesheet" href="../css/reset.css">
        <style>

            div {
                text-align  : center;
                line-height : 100px;
                font-size   : 15px;
                font-weight : bold;
            }


            #father {
                width  : 300px;
                height : 300px;
                border : 1px solid #e5e5e5;
                margin : 270px auto;
            }

            #one {
                width            : 100px;
                height           : 100px;
                background-color : #00bfff;
            }

            #two {
                width            : 100px;
                height           : 100px;
                background-color : deepskyblue;
                position         : relative;
                left             : 200px;
                top              : -100px;
            }

            #three {
                width            : 100px;
                height           : 100px;
                background-color : yellow;
                position         : relative;
                left             : 100px;
                top              : -100px;
            }

            #fourth {
                width            : 100px;
                height           : 100px;
                background-color : deepskyblue;
                position         : relative;
                top              : -100px;
            }

            #five {
                width            : 100px;
                height           : 100px;
                background-color : deepskyblue;
                position         : relative;
                left             : 200px;
                top              : -200px;
            }
        </style>

    </head>
    <body>

        <div id="father">

            <div id="one"><a href="#"> 第一个盒子</a></div>
            <div id="two"><a href="#">第二个盒子</a></div>
            <div id="three"><a href="#">第三个盒子</a></div>
            <div id="fourth"><a href="#">第四个盒子</a></div>
            <div id="five"><a href="#">第五个盒子</a></div>
        </div>

    </body>
</html>

2、绝对定位

1
2
3
4
5
6
/*绝对定位*/
position : absolute;
top      : 20px;
left     : px;
right    : px;
bottom   : px;
  • 定位：基于xxx定位，上下左右
  • 没有父级元素定位的前提下，相对于浏览器定位（浏览器窗口）
  • 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
  • 在父级元素范围内移动，自己写代码的时候偏移不能超过绝对定位
  • 总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
  • 父元素相对定位，子元素绝对定位（此时是相对于父元素来定位的）

3、固定定位-fixed

1
2
3
4
5
6
/*固定定位*/
position : fixed;
top      : 20px;
left     : px;
right    : px;
bottom   : px;
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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
        <style type="text/css">
            body {
                height : 3000px;
            }

            .one {
                width            : 100px;
                height           : 100px;
                background-color : deepskyblue;
                position         : absolute;
                bottom           : 0;
                right            : 0;
            }

            .two {
                width            : 50px;
                height           : 50px;
                background-color : yellow;
                position         : fixed;
                bottom           : 0;
                right            : 0;

            }
        </style>
    </head>
    <body>

        <div class="one"></div>
        <div class="two"></div>

    </body>
</html>

4、z-index

1
格式：z-index：数字（数字越大代表级别越高，代表该元素在上面）
1
2
3
/*如下两个都是调透明度的，具体区别去百度*/
opacity          : 0.5; /*背景透明度，ie8不能识别*/
filter           : alpha(opacity=50); /*IE8以前能识别，其他不能识别*/
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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>z-index层级</title>
        <style type="text/css">

            #content {
                width       : 400px;
                margin      : 0 auto;
                padding-top : 0;
            }

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

            #text {
                color    : white;
                position : relative;
                top      : -30px;
                left     : 20px;
                z-index  : 0;
            }

            #bg {
                width            : 400px;
                height           : 25px;
                background-color : black;
                position         : relative;
                top              : -52px;

                /*如下两个都是调透明度的，具体区别去百度*/
                opacity          : 0.5; /*背景透明度，ie8不能识别*/
                filter           : alpha(opacity=50); /*IE8以前能识别，其他不能识别*/
            }

        </style>
    </head>
    <body>

        <div id="content">
            <ul>
                <li>
                    <img style="width: 400px;" src="../resources/image/图片3.webp" alt="图片加载失败">
                </li>
                <li id="text">
                    国漫动漫高清壁纸
                </li>
                <li id="bg"></li>
                <li id="size">大小：640*437</li>
                <li id="name">择天记</li>
            </ul>

        </div>

    </body>
</html>

5、动画