开始

开发工具：VsCode
ctrl + z 撤销
ctrl + s 保存
alt + shift + f 代码自动格式化
Emmet快捷键： https://docs.emmet.io/abbreviations/syntax/
在本地开发，在服务器共享。

HTML5

W3C 官网： https://html.spec.whatwg.org/multipage/
MDN: https://developer.mozilla.org/zh-CN/docs/Web/HTML

基础标签

排版标签

标签名 语义和功能 单标签还是双标签
h1 ~ h6 一级标题~六级标题 双标签
p 段落 双标签
hr 分隔线 单标签
br 换行 单标签
pre 原格式显示 双标签
div 无语义，用于页面布局 双标签

文本标签

标签名 语义和功能 单标签还是双标签
ins 表示增加的内容，默认添加下划线 双标签
del 表示删除的内容，默认添加删除线 双标签
sub 下标字 双标签
sup 上标字 双标签
em 强调，默认表现斜体字 双标签
strong 强调，默认表现粗体字 双标签
span 无语义，配合CSS给文字设置样式 双标签

列表标签

标签名 功能和语义 单标签还是双标签
ul 无序列表包裹元素 双标签
ol 有序列表包裹元素 双标签
li 列表项 双标签
dl 定义列表包裹元素 双标签
dt 定义列表项标题 双标签
dd 定义列表项描述 双标签

表格标签

标签名 功能和语义 属性 单标签还是双标签
table 表格包裹元素 width
height
cellspacing
cellpadding
border		 双标签
caption 表格标题 双标签
thead 表格头 align
valign		 双标签
tbody 表格体 align
valign		 双标签
tfoot 表格脚 align
valign		 双标签
tr 行 height
align
valign		 双标签
td 单元格 width
height
align
valign
colspan
rowspan		 双标签
th 表头单元格 width
height
align
valign
colspan
rowspan		 双标签

内联框架标签

标签名 功能和语义 属性 单标签还是双标签
iframe 内联框架
将各种类型的文件引入当前页面		 src: 设置目标文件地址。
frameborder：设置是否有边框，0表示没有，其他数字表示有。
width：设置宽度。
height：设置高度。		 双标签

用途：打广告常用、子窗口
被引入的一方可以拒绝连接，比如京东就拒绝了。

还可以设置id属性设置窗口名称，可以配合a标签的target属性使用。

关于图片

标签名 语义和功能 属性 单标签还是双标签
img 引入图片 src：设置图片地址。
alt：当图片无法正常显示，显示该文字内容。
width：设置宽度。
height：设置高度		 单标签

如果单独设置宽度或者高度，另一个方向根据比例自动计算。同时设置宽高容易导致图片拉伸失真。

◆常见的图片格式：

1
2
3
4
5
6
jpg / jpeg
png
gif
bmp
webp
...

◆base64图片：Base64 是一种「编码方式」，把图片的二进制数据转换成可直接写在代码里的文本字符串 —— 相当于把 “图片文件” 打包成了 “一串字符”，嵌在 HTML/CSS 里就能显示。

普通图片 Base64 图片
以文件形式存在（如 logo.png） 把图片转换成一串字符串（由字母 / 数字 / 符号组成）
需要单独请求加载（浏览器发请求下载图片文件） 直接嵌在代码里，无需单独下载图片文件
示例：src="logo.png" 示例：src="data:image/png;base64,iVBORw0KGgoAA..."

前端里面会出现吗？yes！
1.小图标/小图片：（比如10KB以内的按钮图标、加载动画）：减少浏览器的HTTP请求（不用单独下载图片文件），提升页面加载速度。
2.临时展示：比如用户上传图片后预览，不用先上传到服务器，直接把图片转成 Base64 显示在页面。

⚠️ 注意：大图片不要用Base64！Base64字符串比原图片体积大30%左右，大图片转Base64会让代码变臃肿，反而拖慢页面加载。

推荐的base64图片转换工具： https://tool.chinaz.com/tools/imgtobase/

相对路径

./是指当前文件所在的目录，./可以省略。（如果目标文件在同级或者下级）
../是指当前文件的上级目录。（如果目标文件在上级或者先进入上级再访问所在目录）
../../ 上上级
../../../ 上上上级

  1. img 标签引入图片
  2. a 标签超链接设置目标文件
  3. video 标签引入视频
  4. audio 标签引入音频
  5. iframe 标签引入各种类型的文件
  6. link 标签关联 css 文件
  7. script 标签引入 js 文件
标签名 语义和功能 属性 单标签还是双标签
a 超链接 href：设置目标文件地址。
target：设置目标文件在哪个窗口打开（_blank表示新窗口）		 双标签

href的值是空的点击刷新。

1
<a href="">刷新</a>

href目标文件分为两种：
1.浏览器能够打开： 点击超链接，浏览器直接打开。比如网页文件、图片文件、视频文件、pdf等。
2.浏览器无法打开： 点击超链接，直接下载。比如：word、pptx、zip等。

◆锚点

1
2
3
4
5
6
7
8
<!-- 跳转到本页面的锚点 -->
<a href="#锚点名"></a>

<!-- 跳转到其他页面的锚点 -->
<a href="页面地址#锚点名"></a>

<!-- 跳转到页面顶部 -->
<a href="#"></a>

其他

字符实体，请参照： https://www.w3cschool.cn/htmltags/html-symbols.html

HTML全局样式：

1
2
3
4
5
6
id		唯一标识，可以用作锚点名、可以用作css选择器
class	设置类名，用于css选择器
name	设置名称标识，对于表单控件用处较大
style	用于直接设置css样式
title	设置提示文字，鼠标悬浮在元素上会显示
lang	设置语言，英文：en; 中文：zh-CN

语言参考代码： https://www.w3school.com.cn/tags/html_ref_language_codes.asp

元信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 字符集编码 -->
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<!-- 网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

<!-- 网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">

<!-- 设置完美视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 设置网页刷新 -->
<!-- <meta http-equiv="refresh" content="3"> -->
<!-- 定时跳转 -->
<meta http-equiv="refresh" content="10,url=http://www.atguigu.com">
<title>Document</title>

表单

常见表单属性

◆ name 属性
1.name是提交表单时显示的键名(value是值)，与后端对应。
2.多个单选框要实现单选效果需要设置相同的name。
3.下拉选项需要将name设置到select上。
4.提交按钮、重置按钮、普通按钮不要设置name属性。

◆ value 属性
1.文本输入框、密码输入框，value可以设置默认显示的内容。
2.单选框、复选框，value设置真正提交的数据。
3.input实现的提交按钮、重置按钮、普通按钮，value设置按钮上的文字。
4.button和textarea不需要value。
5.下拉选项option可以使用value设置真正提交的数据，如果没有设置value，双标签中的文字作为提交的数据。

◆ disabled 属性
1.表单控件设置disabled属性将变为不可用。
2.disabled属性不需要值。
3.select 设置disable属性整个下拉选项不可用；option设置disabled属性该选项不可选。

◆label里面的for与input里面的id唯一对应，使得光标自动匹配。

标签名 语义和功能 属性 单标签和双标签
form 表单包裹元素 action：设置表单提交地址。
target：设置提交地址从那个窗口打开		 双标签
input 各种类型的表单控件 type：表单控件类型。
maxlength：最大可输入长度。
checked：设置默认选中。
name：表单控件标识。
value：表单控件的值。
disabled：设置为不可用。		 单标签
button 各种类型的按钮 type：按钮类型。
disabled：设置为不可用。		 双标签
textarea 文本域 rows: 默认显示的行数。
cols：默认显示的列数。
name：表单控件标识。
disabled：设置为不可用。		 双标签
select 下拉选项包裹元素 name：表单控件标识。
disabled：设置为不可用。		 双标签
option 下拉的选项 value：表单控件的值。
selected：设置默认选中
disabled：设置为不可用。		 双标签
label 用于关联表单控件 for：表单控件的id 双标签
fieldset 设置外围的边框 无 双标签
legend 设置表单标题
需要与fieldset配合		 无 双标签

文本输入框

1
2
3
4
5
6
7
<input type="text"> <br>

<!-- type 属性的默认值就是 text -->
<input> <br>

<!-- maxlength 可以限制最大输入长度 -->
<input type="text" maxlength="10">

密码输入框

1
2
<input type="password"> <br>
<input type="password" maxlength="6">

单选框

1
2
3
 <input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender" checked>其他
  1. 多个单选框要实现单选效果，需要设置相同的 name 属性值。
  2. 设置 checked 属性可以实现默认选中，该属性不需要值。

多选框

1
2
3
4
5
6
7
8
9
10
11
<label>
	<input type="checkbox" name="hobby" value="game"> 打游戏
</label>

<label>
	<input type="checkbox" name="hobby" value="song"> 唱歌
</label>

<label>
	<input type="checkbox" name="hobby" value="dance" checked> 舞蹈
</label>
  1. 设置 checked 属性可以实现默认选中，该属性不需要值。

按钮

提交：

1
2
3
4
<input type="submit">
<input type="submit" value="提交">
<button type="submit">提交</button>
<button>提交</button>

重置：

1
2
<input type="reset">
<button type="reset">重置</button>

普通按钮：

1
2
<input type="button" value="普通按钮01">
<button type="button">普通按钮02</button>

文本域

1
<textarea rows="10" cols="60"></textarea>
  1. rows设置默认显示的行数，影响高度。
  2. cols设置默认显示的列数，影响宽度。

下拉选项

1
2
3
4
5
6
7
8
<select name="">
    <option>江苏省</option>
    <option>安徽省</option>
    <option>河南省</option>
    <option selected>新疆维吾尔自治区</option>
    <option>内蒙古自治区</option>
    <option>广西壮族自治区</option>
</select>
  1. 默认选中的是第一个选项，可以使用 selected 设置默认选项。
  2. 下拉选项需要将name设置到select上。

多媒体

◆图片img，音频audio，视频video。
◆懒加载，滚动到图片位置才加载，提升性能。
◆设置尺寸的时候建议只设一个，另一个 auto，避免图片变形。

标签名 功能和语义 属性 单标签还是双标签
video 视频 src：视频地址。
width：设置宽度。
height：设置高度。
controls：显示控制条，不需要值。
muted：默认静音，不需要值。
autoplay：自动播放，不需要值。
loop：循环播放，不需要值。
preload：预先加载，不需要值。
poster：设置视频封面图地址。		 双标签
audio 音频 src：音频地址。
controls：显示控制条，不需要值。
muted：默认静音，不需要值。
autoplay：自动播放，不需要值。
loop：循环播放，不需要值。
preload：预先加载，不需要值。		 双标签
source 视频或音频 src：视频或音频的地址。
type：视频或音频的类型		 单标签

CSS3

开始

修改元素的显示模式：display

类型 宽高生效 独占一行 举例
inline行内元素 ❌ 否 ❌ 否 文本标签： em、strong、del、ins、sub、sup、span
超链接标签： a
表单标签： label
block块级元素 ✅ 是 ✅ 是 排版标签： h1~h6、p、pre、hr、div
列表标签： ul、ol、li、dl、dt、dd
表单标签： form、option
inline-block行内块元素 ✅ 是 ❌ 否 图片标签： img
表单标签： input、button、textarea、select
框架标签： iframe

块级元素居中
① 让块级元素在父元素中水平居中：给父元素设置 text-align:center。
②让块级元素在父元素中纵向居中：给父元素设置line-height的值=父元素的高度值。

行内块元素居中
① 让行内块元素在父元素中水平居中：给父元素设置 text-align:center。
② 让行内块元素在父元素中纵向居中：给父元素设置行高；给行内块元素设置 vertical-align:middle。

行内元素或行内块元素之间的空白问题
产生原因：代码中，元素之间的换行
解决方案：
① 代码中，元素之间不写换行（不推荐）
② 父元素设置字体大小为0； 如果行内块元素中还有文字单独设置字体大小。

底部的空白（图片的幽灵空白）
产生原因：行内块元素默认与文字基线对齐，底部的空白就是基线与底线的距离。
解决方案：
① 父元素设置字体大小 0
② 给行内块元素设置 vertical-align:bottom (推荐)
③经典解决方案，针对图片，将图片设置成块级元素

长度单位： px、em、%
颜色设置方式：颜色名、rgb()、十六进制

最常用的属性：

属性名 作用 属性值
color 设置文字颜色 颜色
background-color 背景颜色 颜色
font-size 字体大小 长度
text-align 文本水平对齐方式 left：左对齐。
right：右对齐。
center：居中对齐
text-decoration 文本修饰线 none：无修饰线。
underline：下划线。
overline：上划线。
line-throuth：删除线
cursor 设置鼠标光标 pointer：小手。
move：移动图标。

关于优先级

基本选择器之间的权重：

  1. ID选择器 > 类选择器、伪类选择器 > 标签名选择器 > 全局选择器
  2. 行内式大于所有的选择器

    ID > 类 / 伪类 > 标签，同分则 “后写者赢”。注意!imporant强制生效。

4 种基础选择器核心：

  • 后代选择器（空格）：选所有层级后代。
  • 子元素选择器（>）：只选直接一级子元素。
  • 交集选择器（无分隔）：选同时满足所有条件的元素。
  • 并集选择器（,）：选满足任一条件的元素（共享样式）。

超链接伪类核心：

  • 作用：控制链接 “未访问 / 已访问 / 悬停 / 点击”4 种状态。
  • 关键：必须按:link → :visited → :hover → :active书写（Love Hate 记忆），否则后写的样式会覆盖先写的，导致伪类失效。
  • 优先级：同权重下，CSS 后写的样式会覆盖先写的，这是顺序要求的核心原因。

    1.当链接是「未访问且未悬停」时：只匹配 a:link。
    2.当链接是「未访问且悬停」时：同时匹配 a:link 和 a:hover，但因为 a:hover 写在后面，最终显示a:hover。

⚠️坑：并集选择器的组合，各自计算各自的权重，不会放在一起计算，容易粗心算错。

盒子理解

图源：March

注意：
◆行内元素有个致命问题：无法设置width/height，也无法让上下margin/padding完全生效。
如何解决？设置为行内块即可改变宽度。如label{display:inline-block; width: 65px;}

◆margin塌陷/合并：margin上下会折叠，取最大值。行内元素设置margin的时候，上下不生效，即不影响垂直布局。
◆块级元素设置宽度后，设margin:10px auto可实现水平居中。

◆当全局有box-sizing: border-box;的时候，说明后面设置的width都是text+padding*2+border*2。经常会看见这种全局初始化样式：

1
* { margin: 0; padding: 0; box-sizing: border-box; }

◆padding: a b c;上 = a，左右 = b，下 = c。
◆padding: a b;上下 = a，左右 = b。

内容溢出盒子：

CSS 属性名 功能 属性值
overflow 设置溢出内容的显示方式 visible：显示，默认值。
hidden：隐藏。
scroll：滚动条。
auto：自动（只有内容溢出才会显示滚动条）。

隐藏元素：

  1. 设置 visibility:hidden; 元素隐藏但是占据位置。
  2. 设置 display:none; 元素彻底隐藏，不占据位置。

样式继承：
优先级：直接设置的样式 > 自带的样式 > 继承的样式

关于行高：

浮动

浮动最初用于实现文字环绕效果。

文档流（Normal Flow）：也叫正常流 / 普通流，是浏览器渲染 HTML 元素时的默认布局规则，元素按照书写顺序，从左到右、从上到下依次排列，每个元素都占据自己的 “布局空间”，不会重叠。

元素浮动之后，称为浮动元素。

  1. 浮动元素脱离文档流
  2. 多个浮动的元素会水平排列，一行放不下自动换行
  3. 不论元素原来的显示模式是什么，设置成浮动之后，就是浮动元素，具有自己的显示特点：
    ① 水平排列，自动换行，不存在外边距的塌陷和合并，设置左右外边距auto不会居中（与块级区别）
    ② 设置宽高、内外边距都没有问题（与行内区别）
    ③ 不会被父元素作为文本去处理（与行内块和行内区别）

消除浮动影响：

1
2
3
4
5
父元素::after {
    content: "";
    display: block;
    clear:both;
}
CSS 属性 功能 属性值
float 设置浮动 left、right、none
clear 清除浮动的影响 left、right、both

定位

定位属性：position，配合top/right/bottom/left控制元素位置。

定位类型 参考基准 是否脱离文档流 典型场景 附加使用
static（默认） 无 否 普通文档流
relative 自身原位置 否 微调位置 / 作为绝对定位的父容器 left:20px;（右移） top:20px;（下移）
absolute 包含块 是 悬浮弹窗 / 元素覆盖
fixed 浏览器视口 是 回到顶部按钮
sticky（粘性） 滚动到指定位置后固定 否（滚动前占空间） 吸顶导航

一般元素的包含块就是父元素，绝对定位元素的包含块是第一个定位的祖先元素（从父元素开始向上找），如果没有定位的祖先元素，包含块就是整个页面。

注意事项：
◆同时设置浮动和绝对定位，浮动不生效。
◆绝对定位/固定定位元素具有自己的显示特点：
① 默认宽高都是被内容撑开，不存在外边距的塌陷和合并（与块级区别）
② 设置宽高、内外边距都没有问题（与行内区别）
③ 不会被父元素作为文本去处理（与行内块和行内区别）
◆吸顶导航一般设置了 line-height 的值等于容器的 height 值，来实现文字自动在容器垂直方向居中。

◆设置绝对/固定定位元素在包含块中水平垂直都居中
方案一：

1
2
3
4
5
6
position: absolute/fixed;
left: 50%;
top:50%;
margin-left: -自身总宽度/2;
margin-top:-自身总高度/2;
/*最后两步可以改为transform: translate(-50%, -50%)*/

方案二：

1
2
3
4
5
6
position: absolute/fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

◆定位的显示层级

  1. 定位的元素默认显示层级是相同的，不论进行哪一种定位，后面的元素显示在上层； 定位元素的显示层级比不定位高。
  2. 定位的可以通过 CSS 属性z-index 设置显示层级，值是数字，可以是负值，值越大显示层级越高； 不定位的元素设置 z-index 无效！

回到顶部的核心原理是什么？
是因为href="#"，如果 # 后面没有跟任何 id（空锚点），浏览器会默认滚动到页面最顶部（视口的 0,0 坐标）。

总结：position、left、right、top、bottom、z-index。

精灵图

精灵图（CSS Sprite）：也叫「雪碧图」，是将多个小图标、小图片合并成一张完整的大图。

优点：

  1. 减少 HTTP 请求次数（一张大图替代多张小图），提升网页加载速度；
  2. 统一管理小图标，方便维护和修改。

◆制作精灵图在线工具 https://alloyteam.github.io/gopng/
其他：Markman

①favicon 图标的使用

  • 使用方法一：把 ico 图标文件命名为 favicon.ico ,放在网站根目录下，网页会自动获取 ico 图标。
  • 使用方法二：在网页中使用 link 标签自行引入 ico 文件。
1
<link rel="shortcut icon" type="images/x-icon" href="favicon.ico">

② favicon 图标的制作

Flex布局

flex有什么用，解决了什么问题？
flex布局实现了用最少的 CSS 代码，解决一维布局的 “对齐、均分、换行、自适应” 问题，替代传统繁琐且易出错的布局方式，让前端布局从 “拼拼凑凑” 变成 “精准控制”。

Flex是 “弹性布局”，只需给父元素设display:flex，子元素就变成 “Flex 项目”，支持灵活排列。

Flex 最常用的能力，替代传统复杂的居中方案：

  • 水平居中：父容器加 justify-content: center；
  • 垂直居中：父容器加 align-items: center；
  • 两端对齐：父容器加 justify-content: space-between（元素贴左右，中间均分空白）；
  • 均匀分布：父容器加 justify-content: space-around（元素左右空白相等）。

注意事项：
◆Flex 垂直居中：父容器设display:flex + justify-content:center + align-items:center（需给父容器设高度）。
◆flex:3;表示占比。

Grid布局

Grid 是 “网格布局”，将父容器划分为行和列，子元素放入网格中（适合二维布局，如卡片网格、表单栅格）。

父容器属性：

属性 作用 使用
display: grid 开启 Grid 布局
grid-template-columns 定义列数 / 列宽 grid-template-columns: 100px 200px（表示分成2 列，宽 100/200px）或者repeat(3, 1fr)（表示分成3 列，各占 1 份）
grid-template-rows 定义行数 / 行高 grid-template-rows: 50px 100px（2 行，高 50/100px）
grid-gap 网格间距 grid-gap: 10px（行列间距 10px）

页面布局

  1. reset.css 将元素自带的样式重置掉。
  2. normalize.css 重新设置了元素自带的样式，保持各浏览器统一，需要设计稿也使用normalize标准。

伪类 伪元素

常用伪类

伪类 作用 示例
:hover 鼠标悬浮时 a:hover { color: red; }
:active 鼠标点击时 button:active { background: #ccc; }
:focus 元素获焦时 input:focus { border: 2px solid blue; }
:nth-child(n) 选中第 n 个子元素 li:nth-child(2) { color: green; }
:checked 选中的单选 / 复选框 input:checked + label { color: red; }

常用伪元素

伪元素 作用 示例
::before 元素内部前面插入内容 div::before { content: "前缀"; }
::after 创建一个末尾的伪元素（相当于在父容器最后加了一个隐藏的子元素）。 div::after { content: "后缀"; }
::placeholder 输入框提示文字样式 input::placeholder { color: #999; }
  • 伪元素必须加content：即使是空内容也要写content: ""，表示占位，无可见内容。
  • 伪类优先级：!important > 行内样式 > ID > 类 / 伪类 > 标签 / 伪元素；
  • ::before/::after 默认为行内元素，需设display:block才能设宽高。

浮动清除

1
2
3
4
5
6
7
/* 伪元素：清除浮动（经典用法） */
.clearfix::after {
  content: "";          /* 必写：伪元素显示的前提，空内容仅占位 */
  display: block;       /* 关键：将伪元素转为块级元素 */
  clear: both;          /* 核心：清除左右两侧的浮动影响 */
}
.float-box { float: left; width: 100px; height: 100px; background: pink; margin: 10px; }
  1. ::after 默认为行内元素（inline），行内元素无法触发 clear: both；
  2. 转为块级元素（block），才能独占一行，覆盖整个父容器宽度，触发清除浮动。
  3.  clear 属性作用是「让当前元素的两侧（both = 左右）不允许有浮动元素」；
  4. 这个伪元素会 “挤到” 所有浮动子元素的下方，强制父容器感知到浮动元素的高度，从而撑起父容器。

媒体适配

媒体查询（@media）：根据设备的宽度 / 高度 / 屏幕方向等，应用不同的 CSS 样式（实现 “一套代码适配多端”）。

常用断点（行业通用）：

  • 移动端：≤768px；
  • 平板：768px~992px；
  • 桌面端：≥992px。
1
2
3
4
5
6
7
8
9
10
11
    /* 移动端适配（≤768px） */
    @media (max-width: 768px) {
      .nav { flex-direction: column; text-align: center; } /* 导航纵向排列 */
      .nav a { margin: 10px 0; }
      .grid { grid-template-columns: 1fr; } /* 1列 */
    }
    
    /* 平板适配（768px~992px） */
    @media (max-width: 992px) {
      .grid { grid-template-columns: repeat(2, 1fr); } /* 2列 */
    }

直接适配移动端：

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-width：设置视口的宽度等于设备的物理屏幕宽度。
initial-scale=1.0：设置页面初始缩放比例为1.0（100%缩放，无缩放）。
maximum-scale=1.0：限制用户最大缩放比例为 1（禁止放大）。
user-scalable=no：禁止用户手动缩放页面（避免用户缩放导致布局错乱）。

简单动画

常用属性：

1
2
3
4
   cursor: pointer; //鼠标图案变手指
   transition: all 0.3s ease;//过渡：所有属性变化耗时0.3s
   transform: scale(1.1); /* 缩放1.1倍 */
   transform: rotate(0deg);

rotate(deg)：旋转函数，deg 是角度单位（度），-360deg中的负数值表示逆时针旋转。

动画指定：

1
2
3
4
5
6
7
@keyframes 动画名称 {
  0% { /* 开始 */ }
  25% { /* 1/4进度 */ }
  50% { /* 中间 */ }
  75% { /* 3/4进度 */ }
  100% { /* 结束 */ }
}

应用动画：

1
2
3
.selector {
	animation: 动画名称 时长 速度曲线 循环次数;
}
参数 常用取值
速度曲线 linear（匀速）、ease（默认，先慢后快）、ease-in（慢进）、ease-out（慢出）、ease-in-out（慢进慢出）
循环次数 数字、infinite（无限循环）、alternate（往返循环0%->100%->0%->100%）

注意：如果父元素有明确的高度值（一般是水平动画），还要设置height:100%，它表示「当前元素的高度 = 其父元素的高度」。

BFC

BFC 的意思是 Block Formatting Context ，即块级格式上下文。 然后，当元素满足了某些条件，我们认为该元素创建了 BFC。 创建了 BFC 的元素我们可以把他看做是一个独立的容器，容器内的元素不论如何布局都不会影响到外面。

创建 BFC 的方式：

  • 根元素。
  • 浮动元素。
  • 绝对定位或固定定位的元素。
  • 行内块元素。
  • 表格单元格（th、td）、表格行（tr）、表格标题（caption）、table、thead、tbody、tfoot。
  • overflow 的值不为 visible 的块元素。(hidden、auto、scroll)
  • 伸缩项目。
  • 多列容器。column-count:1;
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。

创建 BFC 可以解决的问题：
① 清除子元素浮动的影响
② 解决外边距塌陷

  • 两个相邻块级元素，上下 margin 合并，最终间距 = 较大的那个 margin 值（而非相加）。
  • 父元素没有被子元素的 margin 撑开，子元素的 margin 变成了父元素与页面的间距。