html&css

html

常见元素

1
<hr>分割线 <br>换行 ！生成大致结构
2
<h1>1号标题</h1>
3
<P>段落
4
<b>加粗  <em>倾斜
5
&nbsp 空格
6
<s> <u>下划线

图像

1
<img src="assets/test.png"
2
alt="这是一个简单的图片" //加载不出来显示
3
loading="lazy"
4
width="200" height="200"
5
title="这是一个简单的图片"//鼠标放上去显示对应文字
6
>

超链接

1
<a href="https://www.jetbrains.com/webstorm/" target="_blank">
2
  <img src="assets/test.png" alt="每次都要写这个，好烦">
3

4
</a>
5
默认值为_self，表示在当前页面进行跳转，要在新窗口打开我们需要使用_blank：

列表

1
<ol  type="a">
2
  <li>我是第一项</li>
3
  <li>我是第二项</li>
4
</ol>
5
//1：阿拉伯数字1/2/3/4排序
6
//a：小写英文字母abcd排序
7
//A：大写字母ABCD排序
8
//i：大写罗马数字I、II、III排序
9

10
<ul>
11
  <li>我是第一项</li>
12
  <li>我是第二项</li>
13
</ul>

表格练习

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
</head>
9

10
<body>
11
    <form action="">
12
        <table border="1" height="500" width="300">
13
            <caption><b>优秀学生信息表</b></caption>
14
            <tr>
15
                <th>年级</th>
16
                <th>姓名</th>
17
                <th>学号</th>
18
                <th>班级</th>
19
            </tr>
20
            <tr>
21
                <td rowspan="2">高三</td>
22
                <td>张三</td>
23
                <td>110</td>
24
                <td>三年二班</td>
25
            </tr>
26
            <tr>
27
                <td>赵四</td>
28
                <td>120</td>
29
                <td>三年一班</td>
30
            </tr>
31
            <tr>
32
                <td>评语</td>
33
                <td colspan="3">你们都很优秀</td>
34
            </tr>
35
        </table>
36
    </form>
37

38

39
</body>
40

41
</html>

表单

文本输入框

1
<form>
2
  <input value="牛魔的"  size="10" maxlength="5">
3
</form>
4
email：电子邮件地址输入，支持格式验证
5
url：URL输入，支持格式验证
6
tel：电话号码输入
7
number：数字输入，可以使用上下箭头进行增减
8
range：范围输入，通常以滑块形式呈现
9
date：日期选择输入，通常显示日期选择器
10
time：时间选择输入，通常显示时间选择器
11
datetime-local：本地日期和时间输入
12
month：月份选择输入
13
week：周选择输入
14
color：颜色选择输入，通常显示颜色选择器
15
file：文件选择输入，允许用户上传文件
16
hidden：隐藏输入，不在页面上显示
17
search：搜索框输入，通常在样式上有所不同
18
button：普通按钮
19
submit：提交按钮
20
reset：重置按钮

表单练习

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
</head>
9

10

11
<body>
12
    <h1>青春不常在，抓紧谈恋爱</h1>
13
    <form action="">
14
        <hr><br>
15
        昵称：<input type="text" name="" id="" placeholder="请输入昵称">
16
        //placeholder默认输入值
17

18
        <br><br>
19
        性别：
20
        <label><input type="radio" name="gender" checked>男</label>
21
        <label><input type="radio" name="gender">女</label>
22
        <br><br>
23

24

25
        所在城市：
26
        <select>
27
            <option>北京</option>
28
            <option>上海</option>
29
            <option>广州</option>
30
            <option selected>深圳</option>
31
        </select>
32

33
        <br><br>
34
        婚姻状况：
35
        <input type="radio" name="memroy" checked>未婚
36
        <input type="radio" name="memroy">已婚
37
        <input type="radio" name="memroy">保密
38
        <br><br>
39
        喜欢的类型：
40
        <input type="checkbox"> 可爱
41
        <input type="checkbox" checked> 性感
42
        <input type="checkbox"> 巨乳
43
        <input type="checkbox" checked> 萝莉
44
        <input type="checkbox"> 恶堕
45
        <input type="checkbox"> HENTAI
46
        <br><br>
47
        个人介绍：<br>
48
        <textarea name="" id="" cols="30" rows="10"></textarea>
49
        <h3>我承诺</h3>
50
        <ul>
51
            <li>年满18岁、单身</li>
52
            <li>抱着严肃的态度</li>
53
            <li>真诚寻找另一半</li>
54
        </ul>
55
        <br><br>
56
        <input type="checkbox"> 我同意所有条款
57
        <br><br>
58
        <button type="submit">免费注册</button>
59
        <button type="reset">重置</button>
60
    </form>
61
</body>
62

63
</html>

CSS

引入css样式

1
//行内css
2
<p style="color: green;font-weight: 800">
3
  我是一段文本，我想请问你要干嘛，为什么要黑我们家鸽鸽
4
</p>
5
//head标签里内置style
6
<head>
7
  <meta charset="UTF-8">
8
  <title>我是网站标题</title>
9
  <meta name="viewport" content="width=device-width, initial-scale=1">
10
  <style>
11
    p {   /* 注意使用内部样式需要通过选择器去指定样式能够作用的范围 */
12
      color: green;
13
      font-weight: 800;
14
    }
15
  </style>
16
</head>
17
//外联css
18
<link rel="stylesheet" type="text/css" href="style.css">

CSS选择器

通配符选择器

1
* {
2
  color: blueviolet;
3
}

交集选择器

1
只有同时为p标签并且class中存在test类的元素才能被选中
2
p.test#p {
3
  color: blueviolet;
4
}

并集选择器

1
p { color: blueviolet; }
2
a { color: blueviolet }
3
div { color: blueviolet }
4

5
p, a, div {  /* 与上面的代码效果等价 */
6
  color: blueviolet;
7
}

后代选择器

1
<style>
2
    div span {
3
        color: green;
4
    }
5
</style>
6

7
<div>
8
    <!-- 这个是儿子标签 -->
9
    <span>Hello World!</span>
10
    <p>
11
        <!-- 这个是孙子标签 -->
12
        <span>Hello World!</span>
13
    </p>
14
</div>
15
//它允许你选择位于特定元素内部的所有后代元素。
16
//所有div下的所有span，都会被设置color属性，即div标签下的儿子、孙子、曾孙子..span标签都会被设置color属性，结果中两个HelloWorld均有颜色

子代选择器

1
<style>
2
    div>span {
3
        color: green;
4
    }
5
</style>
6

7
<div>
8
    <!-- 儿子是绿的 -->
9
    <span>
10
        Hello World!
11
    </span>
12
    <p>
13
        <!-- 孙子颜色不受影响 -->
14
        <span>Hello World!</span>
15
    </p>
16
</div>

兄弟选择器

1
.content + p {
2
  color: blueviolet;
3
}
4
相邻兄弟选择器只能选择其下一个相邻兄弟元素，再之后的元素无法选中。

属性选择器

1
<a href="https://www.baidu.com">我是百度</a>
2
<a href="https://www.bing.com">我是必应</a>
3
<div>大家一般用哪一个作为搜索引擎呢？</div>
4

5

6
a[href*="Bing" i] {i来忽略大小写进行匹配：*来表示至少包含一个bing的元素
7
  color: blueviolet;
8
}

hover伪选择器

1
<style>
2
a:hover{
3
    color: red;
4
    text-decoration: none;
5
}
6
</style>
7

8
<a href="#">Hello World</a>
9
//鼠标悬停于超链接上时，链接字体变为红色，并且失去下划线
10

11

12
- `:link`：未访问的链接
13
- `:visited`：已访问的链接
14
- `:active`：鼠标按下时的状态

选择器优先级

1
a: 行内样式的数量（这个数量代表的是有没有内联样式，而非内联样式写了多少，所以只有1和0）
2
b: ID 选择器的数量。
3
c: 类选择器、属性选择器和伪类的数量。
4
d: 元素选择器和伪元素的数量。

1
.test { color: red; }   /* 优先级为 (0, 0, 1, 0) */
2
#aaa { color: blue; }   /* 优先级为 (0, 1, 0, 0) */
3
#aaa.test { color: green; }   /* 优先级为 (0, 1, 1, 0) */
4
显示green
5

6
出现了两个相同有优先级的选择器
7
t2是写在.t1后面的，因此在同等优先级下后者更高
8

9
!important最高级

CSS继承

1
<div class="t1">
2
  <p>This is a paragraph</p>
3
</div>
4

5
.t1 { color: red; }
6

7
color属性就是支持自动继承的属性，自动继承的属性会将其生效给所有的子级元素，除非子元素又单独去设定自己的样式。当然支持自动继承的属性并非所有，只有部分CSS属性会被自动继承，包括文本相关的属性，如 color, font-family, font-size, line-height, visibility, cursor 等，其他属性如盒子模型相关的 margin, padding, border, width, height 等，都不会自动继承

1
<div class="t1">
2
  <p style="color: initial">This is a paragraph</p>
3
</div>
4
//指定其为初始值
5
inherit来表示，如果我们希望某个属性变回自动继承的效果，

CSS文字样式

文体大小

1
<div style="font-size: 16px;">Hello World!</div>
2
<div style="font-size: 26px;">Hello World!</div>
3
//浏览器默认16px
4

5
.test { font-size: 12px }
6
.test p { font-size: 1.5em }
7
由于父元素的字体大小只有12px，其内部元素会自动继承12px的大小，我们将其内部子元素的大小设置为1.5em相对大小，也就是当前元素字体大小的1.5倍

文体粗细

1
<div style="font-weight: normal">Hello World!</div>
2
<div style="font-weight: bold">Hello World!</div>

文体样式

1
<div style="font-style: normal;">Hello World!</div>
2
<div style="font-style: italic;">Hello World!</div>
3
//倾斜

文体系列

1
<div style="font-family: 微软雅黑, 黑体, sans-serif;">Hello World!</div>
2
<div style="font-family: 宋体, Times New Roman, serif;">Hello World!</div>
3
<div style="font-family: Consolas, fira Code, monospace;">Hello World!</div>

CSS文本样式

文体缩进

1
<p>Hello World!</p>
2
<p style="text-indent: 2em;">Hello World!</p>
3
//1em=当前标签的 font-size 大小

文体对齐方式

属性值	效果
left	左对齐（默认）
center	居中对齐
right	右对齐

可居中的标签
- 文本
- span a
- input img
内容居中需要给父元素设置居中属性

1
<p>Hello World!</p>
2
<p style="text-align: center;">Hello World!</p>

文体修饰

1
<p style="text-decoration: none;">
2
<p style="text-decoration: underline;">下划线
3
<p style="text-decoration: line-through;">删除线
4
<p style="text-decoration: overline;">上划线
5

6
.test p span {
7
  text-decoration: line-through red dashed;   /* 不仅添加了中划线，还会使中划线变成红色的虚线样式 */
8
}

行高

取值
- 数字 + px
- 倍数（当前标签 font-size 的倍数）
文本高度
- 上间距
- 文本高度
- 下间距

应用：

单行文本垂直居中：line-height=元素父元素高度

取消上下间距：line-height=1

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <title>行高</title>
5
    <style type="text/css">
6
        p{
7
            /* line-height: 50px; */   /* 固定行高 */
8
            /* line-height: 5; */      /* 倍数（无单位，是字号的倍数） */
9

10
            /* font 复合属性中的行高写法：字号/行高 */
11
            font: italic 700 20px/2 宋体;  /* 字号20px，行高是字号的2倍=40px */
12
        }
13
    </style>
14
</head>
15
<body>
16
    <p>在这个数字化时代，计算机科学一直是科技界的热门话题...行高为字号的2倍</p>
17
</body>
18
</html>

font属性编写

1
font: [font-style font-weight] font-size/line-height font-family;
2
<div style="font: italic normal 700 24px/3 sans-serif;">Hello World!</div>

商品信息

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
    <style>
9
        body {
10
            background-color: #f5f5f5;
11
        }
12

13
        .goods {
14
            width: 234px;
15
            height: 300px;
16
            background: #fff;
17
            margin: 0 auto;
18
            text-align: center;
19
            display: flex;
20
            flex-direction: column;
21
            justify-content: center;
22
            align-items: center;
23
        }
24

25
        .img {
26
            width: 160px;
27
        }
28

29
        .good {
30
            font-size: 14px;
31
            line-height: 25px;
32
        }
33

34
        .desc {
35
            line-height: 30px;
36
            font-size: 12px;
37
            color: #ccc;
38
        }
39

40
        .price {
41
            font-size: 14px;
42
            color: #ffa500;
43
        }
44

45
    </style>
46
</head>
47

48
<body>
49
    <div class="goods">
50
        <img class="img" src="../imgs/01.png" >
51
        <div class="good">樱岛麻衣</div>
52
        <div class="desc">我永远喜欢樱岛麻衣</div>
53
        <div class="price">9421$</div>
54
    </div>
55
</body>
56

57
</html>

新闻练习

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
    <style>
9
        div {
10
            width: 800px;
11
            height: 600px;
12
            margin: 0 auto;
13
        }
14

15
        .center {
16
            text-align: center;
17
        }
18

19
        .gray {
20
            color: #808080;
21
        }
22

23
        .blue {
24
            color: #87ceeb;
25
        }
26

27
        a {
28
            text-decoration: none;
29
        }
30

31
        .indent {
32
            text-indent: 2em;
33
        }
34
    </style>
35
</head>
36

37
<body>
38
    <div>
39
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
40
        <p class="center">
41
            <span class="gray">2077年e1月28日14:58</span>
42
            <span class="blue">新浪科技</span>
43
            <a href="#">收藏本文</a>
44
        </p>
45
        <hr>
46
        <p class="indent">
47
            2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
48
        </p>
49
        <p class="indent">
50
            这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。"
51
        </p>
52
        <p class="indent">
53
            如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》(Nature)杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。
54
        </p>
55
        <p class="indent">
56
            最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成—排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x
57
            =3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。
58
        </p>
59

60
    </div>
61

62
</body>
63

64
</html>

CSS背景

背景颜色

1
/* 默认背景色是透明；背景色在背景图之下*/
2
background-color: transparent;

背景图片

1
<style>
2
    .box {
3
        width: 100%;
4
        /* 元素必须给一个尺寸才能显示背景图 */
5
        height: 500px;
6
        background-image: url(../img/樱岛麻衣.png);
7
    }
8
</style>
9

10
<div class="box"></div>

背景平铺

1
<style>
2
    .box {
3
        width: 100%;
4
        /* 元素必须给一个尺寸才能显示背景图 */
5
        height: 500px;
6
        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
7
        background-repeat: no-repeat;
8
       // repeat  （默认值）水平和垂直方向都平铺
9
       //no-repeat  不平铺
10
        //repeat-x    水平方向平铺（x 轴）
11
        //repeat-y  垂直方向平铺（y 轴）
12
        要解决重复渲染的问题，我们可以使用background-repeat来防止背景图片进行重复渲染，默认情况下只要背景图片小于盒子尺寸，都会进行重复渲染，这里只需设置到no-repeat即可：
13
    }
14
</style>
15

16
<div class="box"></div>

背景位置

1
background-position: 水平方向位置 垂直方向位置;

属性值
- 方位名词（最多只能表示 9 个位置）
  - 水平方向：left center right
  - 垂直方向：top center bottom
- 数字+px（坐标）
  - 坐标轴原点(0,0) 盒子的左上角
  - x 轴水平方向
  - y 轴垂直方向
图片左上角与坐标原点重合

属性连写

1
      <style>
2
          .box {
3
              width: 1000px;
4
              height: 1000px;
5

6
              /* 不连写 */
7
              background-color: #000;
8
              background-image: url(../imgs/01.png);
9
              background-repeat: no-repeat;
10
              background-position: center center;
11
              /* 等价于上面的连写 */
12
              background: #000 url(../imgs/01.png) no-repeat center bottom;
13
          }
14
      </style>
15
      <div class="box"></div>

CSS盒模型

元素显示模式

块级标签

1
div p h ul li dl dt dd form
2
header nav footer

独占一行
宽度默认为父元素 100%；高度默认由元素撑开
可以设置宽度和高度

行内元素

一行显示多个
宽度和高度默认由内容撑开
不可以设置宽度和高度

1
a span b u i s strong ins em del

元素显示模式转换

display: block;

属性值	效果
block	块级元素
inline-block	行内块元素
inline	行内元素

类型	特点	代表标签
块级（Block）	独占一行，宽高有效	`div`、`p`、`h1~h6`、`ul`、`li`
行内（Inline）	不换行，宽高无效	`span`、`a`、`em`、`strong`
行内块（Inline-block）	不换行，宽高有效	`img`、`input`、`td`

块级元素一般作为大容器;

可以嵌套文本、块级元素、行内元素、行内块元素
- p 标签中不要嵌套 div p h 等块级元素
a 标签内部可以嵌套任意内容
- a 标签不能嵌套 a 标签

盒子模型

盒子

标签可以看做是一个盒子

盒子模型：
- 外边距区域 margin
- 边框区域 border
- 内边距区域 padding
- 内容区域 content
盒子内容的宽高
- width
- height

boder边框

1
/* 粗细 线条样式 颜色（不分先后顺序）*/
2
/* 默认4个方向都有*/
3
border: 10px solid red;
4

5
/* 单个方向 */
6
border-top: 10px solid red;
7
border-bottom: 10px solid red;
8
border-left: 10px solid red;
9
border-right: 10px solid red;
10

11
/* 单个属性 */
12
border-width: 边框粗细
13
border-style: 边框样式
14
border-color: 边框颜色
15
//solid 实线
16
//dashed 虚线
17
//dotted 点线

border-style 是必须的，没有 style 边框不显示

内边距padding

1
padding 简写规则（顺时针）：
2

3
- `padding: 10px;` → 四边都是 10px
4
- `padding: 10px 20px;` → 上下 10px，左右 20px
5
- `padding: 10px 20px 30px;` → 上 10px，左右 20px，下 30px
6
- `padding: 10px 20px 30px 40px;` → 上 右 下 左
7
/* 单个方向 */
8
padding-top: 10px;
9
padding-bottom: 10px;
10
padding-left: 10px;
11
padding-right: 10px;
12

13
padding 的百分比始终相对于父元素的宽度来计算

box-sizing

盒子模型采用的是content-box模式，width / height 只包含内容区（content），不包含 padding 和 border，所以当我们添加边距和边框时，盒子的尺寸会变大：

box-sizing: border-box; /* 此时盒子的高度就是height设定的高度 */

新浪导航

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
</head>
9

10
<body>
11
    <style>
12
        .box {
13
            height: 40px;
14
            border-top: 3px #ff8500 solid;
15
            border-bottom: 1px gray solid;
16
        }
17
        .box a {
18
            text-align: center;
19
            width: 80px;
20
            height: 40px;
21
            color: black;
22
            font-size: 10px;
23
            display: inline-block;/* 行内→行内块，可设宽高 */
24
            text-decoration: none;
25

26
             padding: 0 16px;
27
             box-sizing: border-box /*否则会撑大盒子*/
28
            //文本垂直居中
29
            line-height: 40px;
30
        }
31
        a:hover {
32
            color: orange;
33
            background-color: #edeef0;
34
        }
35
    </style>
36
    <div class="box">
37
        <a href="#">新浪导航</a>
38
        <a href="#">新浪导航</a>
39
        <a href="#">新浪导航</a>
40
        <a href="#">新浪导航</a>
41
    </div>
42
</body>
43

44
</html>

外边距 margin

1
/* 可取 4 个值、3 个值、2 个值、1 个值 */
2
margin: 上 右 下 左;
3
margin: 上 左右 下;
4
margin: 上下 左右;
5
margin: 上下左右;
6

7
/* 单个方向 */
8
margin-top: 10px;
9
margin-bottom: 10px;
10
margin-left: 10px;
11
margin-right: 10px;

元素居中

1
<html lang="en">
2
<head>
3
    <title>Document</title>
4
    <style type="text/css">
5
        div{
6
            width: 1000px;
7
            height: 300px;
8
            background-color: pink;
9
            margin: 0 auto;
10
            /* 上下0，左右auto → 水平居中 */
11
        }
12
    </style>
13
</head>
14
<body>
15
    <div>版心</div>  <!-- 居中显示 -->
16
</body>
17
</html>

上下外边距为 0，左右自动分配（居中)

只对定宽的块级元素有效

行内元素/行内块元素需要用 text-align: center 居中

清除浏览器默认样式

1
/*浏览器给 `body`、`p`、`h1~h6`、`ul`、`ol` 等标签都有默认 margin*/
2
* {
3
  margin: 0;
4
  padding: 0;
5
  box-sizing: border-box;
6
}

去掉列表前的符号

1
ul {
2
  list-style: none;
3
}

外边距折叠现象

合并现象

场景：垂直布局的块级元素，上下的 margin 会合并
结果：最终两者距离为 margin 的最大值
解决方法：只给其中一个盒子设置 margin

1
<html lang="en">
2
<head>
3
    <title>Document</title>
4
    <style type="text/css">
5
        div{
6
            width: 100px;
7
            height: 100px;
8
            background-color: pink;
9
        }
10
        .one{
11
            margin-bottom: 50px;    <!-- 下外边距50px（后面又定义了60px） -->
12
            margin-bottom: 60px;    <!-- 覆盖为60px -->
13
        }
14
        .two{
15
            margin-top: 50px;       <!-- 上外边距50px -->
16
        }
17
    </style>
18
</head>
19
<body>
20
    <div class="one">11</div>       <!-- 下 margin: 60px -->
21
    <div class="two">22</div>       <!-- 上 margin: 50px -->
22
    <!-- 两个 div 之间间距 = 60px（取较大值），而不是 60+50=110px -->
23
</body>
24
</html>

1
解决方法一：只设置一个margin
2
<style>
3
    .box-1 {
4
        width: 100px;
5
        height: 100px;
6
        background-color: #698e6a;
7
        margin-bottom: 50px;
8
    }
9

10
    .box-2 {
11
        margin-top: 100px;
12
        width: 100px;
13
        height: 100px;
14
        background-color: #7f9faf;
15
    }
16
</style>
17

18
<div class="box-1"></div>
19
<div class="box-2"></div>

塌陷现象

场景：相互嵌套的块级元素，子元素的 margin-top 会作用在父元素上
结果：导致父元素一起往下移动
解决方法：
1. 给父元素设置 border-top 或者 padding-top(分隔父子元素的 margin-top)
2. 给父元素设置 overflow:hidden;
3. 转换为行内块元素

1
<style>
2
    .box-father {
3
        width: 200px;
4
        height: 200px;
5
        background-color: #b2b6b6;
6
    }
7

8
    .box-child {
9
        width: 100px;
10
        height: 100px;
11
        background-color: #7f9faf;
12
        margin-top: 100px;
13
    }
14

15
    .resolve {
16
        overflow: hidden;
17
        margin-top: 20px;
18
    }
19
</style>
20

21
<div class="box-wrap">
22
    <!-- 元素的margin-top 作用在了父元素上 -->
23
    <div class="box-father">
24
        <div class="box-child"></div>
25
    </div>
26

27
    <!-- [完美解决方案]给父元素设置 overflow:hidden; -->
28
    <div class="box-father resolve">
29
        <div class="box-child"></div>
30
    </div>
31

32
</div>

行内标签的 margin/pading

1
//垂直方向不生效，使用行高 line-height 实现
2
<style>
3
    .box {
4
        border: 1px solid #eee;
5
    }
6

7
    .box span {
8
        margin: 20px;
9
        padding: 20px;
10
    }
11
</style>
12

13
<div class="box">
14
    <span>HELLO WORLD</span>
15
</div>

新闻列表

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Document</title>
7
</head>
8
<body>
9
    <style>
10
        * {
11
            margin: 0;
12
            padding: 0;
13
            box-sizing: border-box;
14
        }
15
        .box {
16
            margin: 0 auto;
17
            width: 500px;
18
            height: 400px;
19
            background-color: #fff;
20
            padding: 42px 30px 0;
21
            border: 1px solid #ccc;
22
        }
23

24
        .box h2 {
25
            border-bottom: 1px #ccc solid;
26
            font-size: 30px;
27
            line-height: 1;
28
            padding-bottom: 9px;
29
        }
30

31
        ul {
32
            list-style: none;
33
        }
34

35
        .box li {
36
            height: 50px;
37
            line-height: 50px;
38
            padding-left: 30px;
39
            border-bottom: #ccc 1px dashed ;
40
        }
41

42
        .box a {
43
            font-size: 16px;
44
            display: inline-block;
45
            color: #666;
46
            text-decoration: none;
47
        }
48

49
    </style>
50

51
    <div class="box">
52
        <h2>最新文章/New News</h2>
53
        <ul>
54
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
55
            <li><a href="#">体验javascript的魅力</a></li>
56
            <li><a href="#">jquery世界来临</a></li>
57
            <li><a href="#">网页设计师的梦想</a></li>
58
            <li><a href="#">jquery中的链式编程是什么</a></li>
59
        </ul>
60
    </div>
61

62
</body>
63
</html>

浮动

inline-block 间隙问题

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <title>Document</title>
5
    <style type="text/css">
6
        div{
7
            width: 100px;
8
            height: 100px;
9
            display: inline-block;    /* 行内块：不换行，宽高有效 */
10
            /*
11
             * 浏览器解析行内块或行内标签的时候，
12
             * 如果标签换行书写会产生一个空格的距离。
13
             */
14
        }
15
        .one{ background-color: pink; }
16
        .two{ background-color: skyblue; }
17
    </style>
18
</head>
19
<body>
20
    <div class="one">div-one</div>   <!-- 两个 div 之间有几px间隙 -->
21
    <div class="two">div-two</div>
22
</body>
23
</html>

解决方法1：将标签写在同一行（不换行）
解决方法2：父元素设置 font-size: 0，子元素再恢复字号
解决方法3：使用 float 代替 inline-block

结构伪类选择器

作用：根据元素在 HTML 中的结构关系查找元素
优势：减少对 HTML 中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素

选择器	说明
E:first-child	父元素中的第一个子元素 E
E:last-child	父元素中的最后一个子元素 E
E:nth-child(n)	父元素中的第 n 个子元素 E
E:nth-last-child(n)	父元素中的倒数第 n 个子元素 E

其中n可以写公式

功能	公式
偶数	2n even
奇数	2n+1 2n-1 odd
找到前 5 个	-n+5
找到从第 5 个往后	n+5

伪元素

元素：HTML 标签
伪元素：CSS 模拟出标签效果，装饰性内容

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点：

必须设置 content 属性才能生效

伪元素默认是行内元素

1
<style>
2
    div::before {
3
        content: '老鼠';
4
    }
5

6
    div::after {
7
        content: '大米';
8
    }
9
</style>
10
<div>爱</div>

标准流

标准流：又称为文档流，浏览器排列元素的规则
常见标准流的排版规则
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素或行内块元素：从左往右，水平布局，空间不够自动换行

浮动

行内元素或行内块元素换行书写会产生一个空格
浮动的特点
- 浮动的标签默认顶对齐，可使用 margin-top 修改距离顶部距离
- 浮动元素会脱离标准流（脱标），在标准流中不占用位置
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面，左右浮动
- 浮动标签具备行内块特点：
  1. 一行显示多个
  2. 可设置宽高
- 浮动之后盒子水平居中不生效 margin: 0 auto;

小米

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
</head>
9

10
<body>
11
    <style>
12
        * {
13
            margin: 0;
14
            padding: 0;
15
            box-sizing: border-box;
16
        }
17

18
        .hole {
19
            margin: 0 auto;
20
            width: 1226px;
21
            height: 614px;
22
        }
23

24
        .left {
25
            float: left;
26
            width: 234px;
27
            height: 614px;
28
            background-color: #800080;
29
        }
30
        .right {
31
            float: right;
32
            width: 978px;
33
            height: 614px;
34
        }
35

36
        ul {
37
            list-style: none;
38
        }
39

40
        .right li {
41
            float: left;
42
            margin-right: 14px;
43
            margin-bottom: 14px;
44
            width: 234px;
45
            height: 300px;
46
            background-color: skyblue;
47
        }
48

49
        .right li:nth-child(4n) {
50
            margin-right: 0;
51
        }
52

53
    </style>
54
    <div class="hole">
55
        <div class="left"></div>
56
        <div class="right">
57
            <ul>
58
                <li></li>
59
                <li></li>
60
                <li></li>
61
                <li></li>
62
                <li></li>
63
                <li></li>
64
                <li></li>
65
                <li></li>
66
            </ul>
67
        </div>
68
    </div>
69
</body>
70

71
</html>

导航栏

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
</head>
9

10
<body>
11
    <style>
12
        * {
13
            margin: 0;
14
            padding: 0;
15
            box-sizing: border-box;
16
        }
17

18
        .box {
19
            margin: 0 auto;
20
            width: 640px;
21
            height: 50px;
22
            background-color: pink;
23
        }
24

25
        ul {
26
            list-style: none;
27
        }
28

29
        li {
30
            float: left;
31
        }
32

33
        .box li a:hover {
34
            background-color: #008000;
35
        }
36

37
        .box li a {
38
            display: inline-block;
39
            width: 80px;
40
            height: 50px;
41
            text-align: center;
42
            line-height: 50px;
43
            color: white;
44
            text-decoration: none;
45
        }
46

47

48
    </style>
49
    <div class="box">
50
        <ul>
51
            <li><a href="#">新闻1</a></li>
52
            <li><a href="#">新闻2</a></li>
53
            <li><a href="#">新闻3</a></li>
54
            <li><a href="#">新闻4</a></li>
55
            <li><a href="#">新闻5</a></li>
56
            <li><a href="#">新闻6</a></li>
57
            <li><a href="#">新闻7</a></li>
58
            <li><a href="#">新闻8</a></li>
59
        </ul>
60
    </div>
61
</body>
62

63
</html>

消除浮动

父子级标签，子级浮动，父级没有设置高度，会导致后面的标准流盒子受影响

1
  - 正常情况

1
<style>
2
    .box {
3
        margin: 0 auto;
4
        width: 1000px;
5
        height: 300px;
6
        background-color: pink;
7
    }
8

9
    .left {
10
        float: left;
11
        width: 300px;
12
        height: 300px;
13
        background-color: #ccc;
14
    }
15

16
    .right {
17
        float: right;
18
        width: 680px;
19
        height: 300px;
20
        background-color: skyblue;
21
    }
22

23
    .btm {
24
        height: 100px;
25
        background-color: green;
26
    }
27
</style>
28
<div class="box">
29
    <div class="left"></div>
30
    <div class="right"></div>
31
</div>
32
<div class="btm"></div>

left和right是box的子级，现在我们将box的height属性注释掉，此时btm会跑到上面去。

解决方案

直接设置父级元素高度

额外标签：在父级元素最后添加一个块级标签

1
    <style>
2
        .box {
3
            margin: 0 auto;
4
            width: 1000px;
5
            background-color: pink;
6
        }
7

8
        .left {
9
            float: left;
10
            width: 300px;
11
            height: 300px;
12
            background-color: #ccc;
13
        }
14

15
        .right {
16
            float: right;
17
            width: 680px;
18
            height: 300px;
19
            background-color: skyblue;
20
        }
21

22
        .btm {
23
            height: 100px;
24
            background-color: green;
25
        }
26

27
+       .clearfix {
28
+           clear: both;
29
+       }
30
    </style>
31
    <div class="box">
32
        <div class="left"></div>
33
        <div class="right"></div>
34
+       <div class="clearfix"></div>
35
    </div>
36
    <div class="btm"></div>

单伪元素清除法

1
    <style>
2
        .box {
3
            margin: 0 auto;
4
            width: 1000px;
5
            background-color: pink;
6
        }
7

8
        .left {
9
            float: left;
10
            width: 300px;
11
            height: 300px;
12
            background-color: #ccc;
13
        }
14

15
        .right {
16
            float: right;
17
            width: 680px;
18
            height: 300px;
19
            background-color: skyblue;
20
        }
21

22
        .btm {
23
            height: 100px;
24
            background-color: green;
25
        }
26
<-父标签后面的伪元素->
27
+       .clearfix::after {
28
+           content: '';
29
+           display: block;
30
+           clear: both;
31
+       }
32
    </style>
33

34
-   <div class="box">
35
+   <div class="box clearfix">
36
        <div class="left"></div>
37
        <div class="right"></div>
38
    </div>
39
    <div class="btm"></div>

双伪元素清除法

1
/* 解决外边距塌陷问题 */
2
.clearfix::before,
3
.clearfix::after {
4
content: '';
5
display: table;
6
}
7

8
.clearfix::after {
9
clear: both;
10
}

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <title>Document</title>
5
    <style type="text/css">
6
        .top{
7
            margin: 0 auto;
8
            width: 1000px;
9
            background-color: pink;
10
            /* 没有 overflow: hidden */
11
        }
12
        .bottom{
13
            height: 100px;
14
            background-color: green;
15
        }
16
        .left{
17
            float: left;
18
            width: 200px;
19
            height: 300px;
20
            background-color: #ccc;
21
        }
22
        .right{
23
            float: right;
24
            width: 790px;
25
            height: 300px;
26
            background-color: skyblue;
27
        }
28

29
        .clearfix{                 /* 清除浮动的空div */
30
            clear: both;           /* 清除左右两侧的浮动 */
31
        }
32
    </style>
33
</head>
34
<body>
35
    <div class="top">
36
        <div class="left"></div>
37
        <div class="right"></div>
38
        <div class="clearfix"></div>  <!-- 空div：清除浮动 -->
39
    </div>
40
    <div class="bottom"></div>        <!-- green 正常显示在下方 -->
41
</body>
42
</html>

给父元素设置 overflow:hidden

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <title>Document</title>
5
    <style type="text/css">
6
        .top{
7
            margin: 0 auto;
8
            width: 1000px;
9
            /* height: 300px; */     /* 没有设置高度！ */
10
            background-color: pink;
11
            //
12
            overflow: hidden;        /* 关键：清除浮动，自动撑开高度 */
13
        }
14
        .bottom{
15
            height: 100px;
16
            background-color: green;
17
        }
18
        .left{
19
            float: left;
20
            width: 200px;
21
            height: 300px;
22
            background-color: #ccc;
23
        }
24
        .right{
25
            float: right;
26
            width: 790px;
27
            height: 300px;
28
            background-color: skyblue;
29
        }
30
    </style>
31
</head>
32
<body>
33
    <!-- 父子级标签,子级浮动,父级没有高度,
34
         后面的标准流盒子会受影响,显示到上面的位置 -->
35
    <div class="top">
36
        <div class="left"></div>
37
        <div class="right"></div>
38
    </div>
39
    <div class="bottom"></div>  <!-- 如果父级没清除浮动，green 会跑到上面 -->
40
</body>
41
</html>

定位

初识

标准流
- 块级元素独占一行 -> 垂直布局
- 行内元素/行内块元素一行显示多个 -> 水平布局
浮动
- 原本垂直布局的块级元素变成水平布局
定位
- 可以让元素自由的摆放在网页的任意位置
- 一般用于盒子之间的层叠情况
- 让盒子固定在页面某一位置
设置定位方式
- 属性名: position

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

相对定位

特点
1. 占有原来的位置
2. 相对于自己之前的位置
3. 不改变显示模式
```
1
position: relative
2
left: 100px;
3
top: 100px;
```

绝对定位

特点

相对于非静态定位的父元素定位
不占有原来的位置
改变显示模式

默认以浏览器 body 定位

1
position: absolue
2
left: 100px;
3
top: 100px;

子绝父相：父级相对定位，子级绝对定位
绝对定位查找父级的方法：逐级向上，最终是浏览器窗口

固定定位

特点

脱标-不占位置
相对于浏览器定位
具备行内块特点
```
1
positions: fixed;
```

元素层级关系

不同布局方式元素的层级关系：标准流 < 浮动 < 定位
同层级，后写的会覆盖在先写的元素

设置元素层级

1
/* 默认值0；数值越大，显示越靠前 */
2
z-index: 数值;

子盒子在父盒子中水平居中

1
<style>
2
    .box-wrap {
3
        position: relative;
4

5
        width: 500px;
6
        height: 500px;
7

8
        background-color: skyblue;
9
    }
10

11
    .box {
12
        position: absolute;
13
        left: 50%;
14
        top: 50%;
15

16
        /* 移动自身一半 */
17
        transform: translate(-50%, -50%);
18
        width: 300px;
19
        height: 300px;
20

21
        background-color: pink;
22
    }
23
</style>
24

25
<div class="box-wrap">
26
    <div class="box"></div>
27
</div>

导航栏 + 二维码浮层

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <title>Document</title>
5
    <style type="text/css">
6
        *{ margin: 0; padding: 0; }       /* 清除默认样式 */
7

8
        .nav{
9
            height: 40px;
10
            border-bottom: 1px solid #ccc;
11
        }
12
        ul{
13
            list-style: none;             /* 去除列表圆点 */
14
            width: 1200px;
15
            margin: 0 auto;               /* 导航居中 */
16
        }
17
        ul li{
18
            float: left;                  /* 浮动实现并排 */
19
            width: 20%;                   /* 每项占20%宽度 */
20
            height: 40px;
21
            border-right: 1px solid #ccc; /* 右边框分隔线 */
22
            box-sizing: border-box;       /* border 不撑大盒子 */
23
            text-align: center;           /* 水平居中 */
24
            line-height: 40px;            /* 垂直居中 */
25
        }
26
        ul .right{
27
            border-right: none;           /* 最后一项去掉右边框 */
28
        }
29
        ul li a{
30
            display: block;               /* a 转块级，可设宽高 */
31
            height: 40px;
32
            text-decoration: none;        /* 去下划线 */
33
            color: black;
34
        }
35
        ul li .app{
36
            position: relative;           /* 相对定位：作为绝对定位的参考 */
37
        }
38
        .code{
39
            position: absolute;           /* 绝对定位：相对于 .app */
40
            left: 50%;                    /* 水平居中起点 */
41
            top: 40px;                    /* 导航下方 */
42
            transform: translate(-50%);   /* 向左偏移自身宽度的50%，实现居中 */
43
        }
44
    </style>
45
</head>
46
<body>
47
    <div class="nav">
48
        <ul>
49
            <li><a href="#">首页</a></li>
50
            <li><a href="#">学校概况</a></li>
51
            <li><a href="#">机构设置</a></li>
52
            <li><a href="#" class="app">学院党建
53
                <img src="pic/code.png" alt="" class="code">  <!-- 悬停时显示的二维码 -->
54
            </a></li>
55
            <li class="right"><a href="#">联系我们</a></li>
56
        </ul>
57
    </div>
58
</body>
59
</html>

float: left：让 <li> 并排显示
position: relative + position: absolute：实现二维码浮层的精确定位
transform: translate(-50%)：水平居中技巧（左移自身宽度一半）
box-sizing: border-box：border 不撑大盒子
line-height: 40px：单行文字垂直居中

装饰

垂直对齐 vertical-align

基线(baseline)：浏览器文字类型元素排版中存在用于对齐的基线

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

1
<style>
2
    .text {
3
        border-bottom: 1px solid #ccc;
4
    }
5

6
    .text-baseline {
7
        vertical-align: baseline;
8
    }
9

10
    .text-top {
11
        vertical-align: top;
12
    }
13

14
    .text-middle {
15
        vertical-align: middle;
16
    }
17

18
    .text-bottom {
19
        vertical-align: bottom;
20
    }
21
</style>
22
<div>
23
    <span class="text text-baseline">咋就对不齐呢</span>
24
    <span class="text text-top">咋就对不齐呢</span>
25
    <span class="text text-middle">咋就对不齐呢</span>
26
    <span class="text text-bottom">咋就对不齐呢</span>
27
</div>

边框圆角 border-radius

1
/* 单值 4个角一样*/
2
border-radius: 数字px/百分比;
3

4
/* 多值 左上角开始，顺时针赋值，没有赋值看对角*/
5
border-radius: 左上 右上 右下 左下;

正圆

盒子必须是正方形

设置边框圆角为盒子宽高的一半

1
<style>
2
    .box {
3
        width: 200px;
4
        height: 200px;
5
        border-radius: 50%;
6
        background-color: skyblue;
7
    }
8
</style>
9

10
<div class="box"></div>

胶囊按钮

盒子设置为长方形

设置边框圆角为高度的一半

1
<style>
2
    .box {
3
        width: 100px;
4
        height: 50px;
5
        border-radius: 25px;
6
        background-color: skyblue;
7
    }
8
</style>
9

10
<div class="box"></div>

光标

	效果	常用场景
`default`	默认箭头	普通元素
`pointer`	手型	链接、按钮（最常用）
`text`	工字形	可选中文本
`move`	十字箭头	可拖拽元素
`not-allowed`	禁止	禁用按钮
`wait`	加载中	等待状态

开发中 cursor: pointer 使用最频繁（提示用户可点击）

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <title>Document</title>
5
    <style type="text/css">
6
        div{
7
            width: 200px;
8
            height: 200px;
9
            background-color: pink;
10

11
            cursor: pointer;    /* 手型（最常用于可点击元素） */
12
            cursor: text;       /* 工字形（文本选择） */
13
            cursor: move;       /* 十字形（可移动） */
14
        }
15
    </style>
16
</head>
17
<body>
18
    <div>div</div>
19
</body>
20
</html>

:focus 伪类

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <title>Document</title>
5
    <style type="text/css">
6
        input:focus{                /* 输入框获得焦点时 */
7
            background-color: yellow;  /* 背景变黄色 */
8
        }
9
    </style>
10
</head>
11
<body>
12
    <input type="text" name="" id="">
13
</body>
14
</html>

溢出部分效果 overflow

溢出部分：盒子内容部分超出盒子范围的区域

属性值	效果
visible	默认，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

1
<style>
2
    .box {
3
        width: 100px;
4
        height: 100px;
5
        background-color: skyblue;
6

7
        overflow: hidden;
8
          overflow-y: auto;   /* 只允许垂直滚动 */
9
          overflow-x: hidden; /* 禁止水平滚动 */
10
    }
11
</style>
12

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

元素本身隐藏

1
/* 占位隐藏 */
2
visibility: hidden;
3

4
/* 不占位隐藏（常用） */
5
display: none;

1
鼠标移动过去显示二维码
2

3
<!DOCTYPE html>
4
<html lang="en">
5
<head>
6
  <meta charset="UTF-8">
7
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
8
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
  <title>Document</title>
10
  <style>
11
    * {
12
      margin: 0;
13
      padding: 0;
14
    }
15

16
    /* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */
17
    .nav {
18
      height: 40px;
19
      border-bottom: 1px solid #ccc;
20
    }
21

22
    /* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */
23
    ul {
24
      list-style: none;
25
      width: 1200px;
26
      margin: 0 auto;
27
    }
28

29
    ul li {
30
      float: left;
31
      width: 20%;
32
      height: 40px;
33
      border-right: 1px solid #ccc;
34
      /* 自动内减 */
35
      box-sizing: border-box;
36
      text-align: center;
37
      line-height: 40px;
38
    }
39

40
    ul .last {
41
     border-right: none;
42
    }
43

44
    ul li a {
45
      /* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 */
46
      /* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */
47
      display: block;
48
      /* 宽度不设置块元素会默认占满一行 */
49
      height: 40px;
50
      text-decoration: none;
51
      color: #000;
52
    }
53

54
    ul li .app {
55
      position: relative;
56
    }
57

58
    .code {
59
      position: absolute;
60
      left: 50%;
61
      top: 41px;
62

63
      display: none;
64

65
      transform: translate(-50%);
66

67

68
    }
69

70
    /* 鼠标悬停a 显示二维码图片 */
71
    .nav li a:hover img {
72
        display: block;
73
    }
74
  </style>
75
</head>
76
<body>
77
  <!-- 导航 -->
78
  <div class="nav">
79
    <ul>
80
      <li><a href="#">产品介绍</a></li>
81
      <li><a href="#">用户评价</a></li>
82
      <li><a href="#">新手教程</a></li>
83
      <!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 -->
84
      <li><a href="#" class="app">下载App <img src="./images/code.jpg" alt="" class="code"> </a></li>
85
      <li class="last"><a href="#">个人中心</a></li>
86
    </ul>
87
  </div>
88

89
</body>
90
</html>

元素整体透明 opacity

1
<style>
2
    .box {
3
        width: 100px;
4
        height: 100px;
5
        background-color: skyblue;
6
        opacity:0;//完全透明
7
        1不完全透明
8
    }
9
</style>
10

11
<div class="box"></div>

半透明

1
<style>
2
    .box {
3
        /* width: 100px; */
4
        height: 100px;
5
        background-color: rgba(0, 0, 0, 0.4);
6
    }
7
</style>
8

9
<div class="box"></div>

背景图片大小 background-size

1
background-size: 宽度 高度;

取值	场景
数字+px	简单方便
百分比	相对于当前盒子自身的宽高百分比
contain	包含，背景图等比缩放，直到不会超出盒子的最大，可能有留白
cover	覆盖，背景图等比缩放，直到刚好填满整个盒子没有空白，图片可能显示不全

background 连写

1
background： color image repeat position/size;

盒子阴影 box-shadow

参数	作用
h-shadow	必须，水平偏移量，允许负值
v-shadow	必须，垂直偏移量，允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

1
<style>
2
    .box {
3
        width: 100px;
4
        height: 100px;
5
        box-shadow: 0 10px 50px 8px #ccc;
6
    }
7
</style>
8

9
<div class="box"></div>

过渡 transition

让元素样式慢慢变化

常配合 hover 使用

1
transition 属性 时长, 属性 时长;

参数	取值
过渡属性	所有属性 all；具体属性 width

注意：
1. 过渡需要默认状态和 hover 样式不同，才能有过渡效果
2. transition 属性给需要过渡的元素本身加
3. transition 属性设置在不同状态中，效果不同
4. 给默认状态设置，鼠标移入移出都有过渡效果
5. 给 hover 状态设置，鼠标移入有过渡效果，移出没有过渡效果
  1 <style> 2 .box { 3 width: 100px; 4 height: 100px; 5 background-color: skyblue; 6 transition: all 2s; 7 } 8 9 .box:hover { 10 width: 200px; 11 background-color: pink; 12 } 13 </style> 14 15 <div class="box"></div>

2D转换

二维变换（2D Transform）是指在 X 轴和 Y 轴组成的平面上进行的变换。所有的二维变换都是通过 transform 属性来实现的。

使用 translate() 函数可以将元素从当前位置沿着 X 轴和 Y 轴移动

1
<div>
2
  <div class="box"></div>
3
  <div>熊大，坐直升机的感觉可真舒服，就跟牢大一样</div>
4
</div>
5

6

7
.box {
8
  width: 100px;
9
  height: 100px;
10
  background-color: red;
11
  /* 表示横向移动10px，纵向移动20px */
12
  transform: translate(10px, 20px);
13
}

relative定位相当于盒子自己发生了移动但又留着原来的位置，而translate则是盒子依然在原地，只是我们自己看起来像是被移动了而已。因此，translate更适合我们后面要介绍的动画功能，因为它仅仅是改变盒子渲染的位置，而非真正移动了盒子，我们后续介绍的所有变换效果实际上都是视觉变换，而非真正作用于盒子上。

缩放

1
.box {
2
  width: 100px;
3
  height: 100px;
4
  background-color: red;
5
  transform: scale(1.5);   /* 变为原本1.5倍的大小 */
6
}
7
transform: scale(1.5, 2);

旋转

1
rotate() 函数可以让元素围绕中心点进行旋转
2
skew() 函数可以让元素产生倾斜变形效果，看起来像是一个平行四边形：

原点变换

默认情况下，所有的变换（特别是旋转和缩放）都是围绕元素的中心点（center center）进行的。我们可以通过 transform-origin 属性来改变这个基点

1
.box {
2
  /* 将旋转中心改为左上角 */
3
  transform-origin: left top;
4
  transform: rotate(45deg);
5
}

组合变换

如果我们需要同时对元素进行平移、旋转和缩放，可以将这些函数写在同一个 transform 属性中，用空格隔开。

1
.box {
2
  /* 先移动，再旋转，最后缩放 */
3
  transform: translate(100px) rotate(45deg) scale(1.2);
4
}

动画

. 什么是动画？

变换（transform）是静态的，动画（animation）让它动起来。

/* 变换：静态效果 */ .box { transform: translate(100px); }

/* 动画：从左到右动起来 */ .box { animation: move 2s; }

@keyframes 关键帧

定义动画的每个阶段：

@keyframes 动画名称 { 0% { /* 开始状态 / } 50% { / 中间状态 / } 100% { / 结束状态 */ } }

课程例子（demo2.2.html）： @keyframes move { 0% { transform: translate(0,0); } 25% { transform: translate(1000px,0); } 50% { transform: translate(1000px,500px); } 75% { transform: translate(0,500px); } 100% { transform: translate(0,0); } }

animation 属性详解

属性	作用	值
animation-name	关联关键帧	move
animation-duration	动画时长	2s
animation-timing-function	速度曲线	ease / linear / ease-in
animation-delay	延迟多久开始	1s
animation-iteration-count	播放次数	1 / infinite（无限）
animation-direction	是否反向	normal / alternate
animation-fill-mode	结束后状态	forwards / backwards
animation-play-state	暂停/播放	paused / running

课程例子（demo2.3.html）

div { animation-name: move; animation-duration: 2s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards; }

div:hover { animation-play-state: paused; /* 悬停暂停 */ }

简写语法

/* 完整写法 */ animation: move 2s ease 1s infinite alternate forwards;

/* 简写 */ animation: move 2s;

太阳动画原理

/* 太阳：从左下 → 上方 → 右下 */ @keyframes moveSun { 0% { transform: translate(0,0); background: yellow; } 50% { transform: translate(200px,-100px); background: orange; } 100% { transform: translate(400px,0); background: yellow; } }

太阳 + 阴影配合，模拟日照效果 ☀️

音乐

音乐