HTML+css学习 学习笔记，由浅入深
猿猿的前端之路就此开始，下面小白白们跟着猿猿一起学习前端基础h5+css叭！
以下是猿猿的学习笔记，内容包含h5+css菜鸟教程几乎所有知识和pink老师知识，外加个人理解简化
HTML5知识点总结
截图工具 Snipaste，是一款强大的贴图软件，猿猿们可以自行下载哦
alt取色，shift切换取色模式
文章目录
- HTML5知识点总结
-
- 一、网页（网站、网页）
-
-
- **什么是HTML:** 是一种用来描述网页的一种语言
- **什么是HTML:** 是一种用来描述网页的一种语言
-
- 二、浏览器
- 三、Web标准（使代码更规范更简介更通用）
-
- **HTML语法规范**：
- **结构标签的总结：**
- **lang语言：**"en"定义语言为英文，"zh-CN"定义语言为中文
- 路径
-
-
-
- 1目录文件夹和根目录
- 2相对路径和绝对路径
-
-
- 特殊字符（空格 +; 小于号<+; 大于号>+;）
- **常用标签**：
-
-
- **1.语义标签**：标题标签、段落和换行、不换行标签
- 2.文本格式化标签（粗体倾斜、删除线、下划线）
- 4.图像标签
-
-
- 图像标签的属性：
- alt：图片显示不出来时用 alt文字替换的方法
- title：鼠标放在图片上能显示文字
- width，heigth 设置图片的宽高，只设置一个时另一个会等比例自己缩放
-
- 复制图片地址导入自己的网页：
- 5.超链接标签（重点）
-
- 1 语法格式
- 2 链接分类
-
- 1.外部链接 ：
- 2.内部链接：
- 3.空链接：
- 4.下载链接：
- 5.网页元素超链接：
- 6.锚点链接：
两部曲
- 1.外部链接 ：
- 6.注释标签：
- 7.表格标签
-
- 1.表格的基本语法：
- 2.表头单元格标签：（用th表示，table hand的缩写） ，效果居中加粗显示
- 3.表格的属性：
-
- align对齐方式；border边框，1有边框，默认为” “ 无边框；cellpadding像素距离边框的距离；cellspacing单元格和单元格之间的空隙，默认2像素；width表格的宽度大小。
- 4.表格结构标签：更加清晰简洁
- image-20210111112039375
- 5.合并单元格（rowspan 跨行；colspan跨列）：
-
- 合并单元格三部曲：
- 8.列表标签（占一行）
-
-
- 1.无序列表：（ul li）（重点）
- 2.有序列表：（ol li理解）
- 3.自定义列表：（dl dt dd重点）
- 4.列表总结：
- 9.表单标签
-
- 1.表单的组成：表单控制、表单域、提示信息
- 2.表单域：（了解）
- 3.表单控件（表单元素input、select、texarea）
-
- 1.imput表单元素：
- 2.select下拉表单元素：
- 3.textarea文本域表格元素：（可以输入很多文本区域）
- 1.imput表单元素：
- 4.type属性：
-
- 1.radio多选一，checkbox复选框多选（他们名字必须都相同）。
- 2.添加value后，文本框中直接出现添加的value值；
- 3.给他们设置checked后，打开后默认已经被勾选；
- 4.maxlength="6" 规定只能输入六个字符；
- 5.submit提交 加**value修改自定义字体内容**，点了之后可以把表单域中的表单元素送给后台服务器。
- 6.reset重置 加**value修改自定义字体内容**，点了之后表单域中所有的东西恢复原状
- 7.button普通按钮 后期搭配js使用
- 8.file文件域 需要上传文件时添加此功能
- 9.placeholder：用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖
- 10.lable标签
-
-
- css知识点总结
-
- css单位详讲
-
- 1.1 相对长度 单位
-
- 1.1.1 字体的 相对长度
- 1.1.3 百分比 单位 (%)
- 1.2 绝对长度单位
- 时间单位 (s , ms)
-
- 时间单位
- 目录：
-
- 1.为什么要用css：
- 2.css语法规范：
- 3.css代码风格：样式格式书写、样式大小写风格、样式空格风格
-
-
- 1.样式格式书写：（提倡用第二种）
- 2.样式大小写书写：
- 3.样式空格风格：
-
- 4.css基础选择器
-
- 1.作用：
- 2.选择器的分类：
-
- 1.标签选择器：
- 2.类选择器：
-
- 语法：
- 多类名：
- 3.id选择器：
-
- 语法：
- id选择器和类选择器的区别：
- 4.通配符选择器：
-
- 语法：
- 5.基础选择器的总结：
- 5.CSS字体属性：
-
-
- 1.字体系列：
- 2.字体大小：
- 3.字体粗细：
- 4.文字样式：
- 5.字体符合属性：
-
- **简写方式：**（倾斜方式、字体粗细、字体大小/字体行距、字体类型）
-
-
- 6.字体属性总结：
-
- 6.css文本属性：
-
-
- 1.文本颜色：
- 2.文本对齐：(test-align:)
- 3.装饰文本：（test-decoration ）
- 4.文本缩进：（test-indent，常用于段落的首行缩进）单位px，em
- 5.行间距、段落行间距：（line-height:）单位像素：px
- 6.文本属性总结：
-
- 6.css引入方式：
-
- 1.css样式表
-
- 1.内部样式表：
- 2.行内样式表：（结构简单的时候使用，适用比较少）
- 3.外部样式表：（用到比较多）
- 4.引入方式总结：
- 5.综合案例：（https://www.bilibili.com/video/BV14J4114768?p=90）
- 6.调试工具：鼠标右键打开检查或F12
- 7.Emmt语法：
-
- 1.快速生成HIML结构语法：
- 2.快速生成css样式语法：
- 3.快速格式化规范代码：
- 8.复合选择器：（后代选择器、子选择器、并集选择器、伪类选择器）
-
- 1.后代选择器：（重要）
-
- 语法：
- 语法：
- 2.子选择器：（亲儿子选择器）
-
- 语法：
如：
- 语法：
- 3.并集选择器：（重要）
-
- 语法：
- 4.伪类选择器：
-
- 1.链接伪类的基本属性
- 2.focus伪类选择器：
-
- 语法：
- 语法：
- 5.复合选择器总结：
- 9.元素显示模式：
-
- 1.块元素：
-
-
- 常见的块元素：
-
- 2.行内元素：
- 3.行内块元素：
-
-
- 特点：具有行内元素的特点（不会分段），块级元素特点（宽高内外边距行高可控）
-
- 4.元素显示模式总结
- 5.元素显示模式转换
-
- 行内元素转换为块级元素：display： block
- 块级元素转换为行内元素：display： inline
- 转换为行内块元素：display： inline-block
- 10.css背景：
-
-
- background：
- 1.背景颜色 background-color：颜色值；
-
- 11.flex布局：
-
-
- 转换为flex布局： display： flex；
-
- 注意：
- 布局原理：
- 常见的父项属性：
-
- flex-direction：设置主轴方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-content：设置侧轴上的子元素排列方式（多行）
- align-items：设置侧轴上的子元素排列方式（单行）
- flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
- 六大属性：
-
- 11.grid布局：
-
-
- 开启布局：给外层元素添加：
- 设置每列的宽度：
-
-
- 固定宽度：
- grid-template-colomn：100px 100px 100px
- 浮动宽度：
- grid-template-colomn：1fr 2fr 1fr fr代表着每行的比例，如1fr=1/总数
-
- 设置间距：
-
-
- column-gap：列间距
- row-gap：行间距
- gap：行间距和列间距
-
- 排列元素：template（模板）
- 对齐：
-
- 垂直方向对齐子元素：（居中、靠下）
-
- align-items：center，end
- 水平方向对齐子元素：（居中、靠右、两端）
-
- justify-items：center、end、space-between
- 当行轨道和列轨道尺寸小于grid容器时：
- 垂直方向上：align-content（居中、靠下）
-
- align-content：center、end
- 水平方向上：justify-content（居中、靠右、两端）
-
- justify-content：center、end、space-between
-
- 12.position的属性：
-
-
-
- 不用转换为块状：
- 固定定位：
-
- 语法：
-
-
- 13.动画（-）（transform）
-
-
- （1）过度（执行这个动作的时间）：（transtation）
- （2）元素的转换点：
-
- 语法：（原点） （起源）
- 注意：
- 语法：（原点） （起源）
- 1.移动（treanslate）
-
- 1.语法：
- 2.注意：
- 2.旋转：
-
-
- 1.语法：
- 2.注意：
- 3.旋转案例
-
- 3.缩放：
-
-
- 1.语法：transform：scale（x，y）；
- 2.div：hover
- 3.优点：
- 4.连写：
-
-
- 13.动画（二）：
-
- 1.步骤：
-
- 1.用@keyframes定义动画（类似于定义类选择器）：
-
- 语法：
- 2.使用动画：
-
- 语法：
- 3.动画属性
-
- ease种类：
- 简写：
- 不包括：
- 13.动画（三）：3D转换
-
- 知识点：
-
- 1.3D移动：transform：translate3d（x，y，z）
- 2.3D旋转：transform：rotate3d（x，y，z，deg）沿着自定义轴旋转deg角度
-
- 旋转方向：（左手法则）
- 3.透视：perspective
-
- 定义：
- 注意：写在父级元素中
- 4.3D呈现：transform-style
- 13.动画（四）：轮播图
-
- **1.z - index ：**
-
-
- 代码：
-
- 14.网页布局：
-
- 1.盒子定位
- image-20210121104552836
-
- 2.显示与隐藏
-
- 1.display属性：
-
- display：none；
- display：block；
- 2.visibility属性：
- 3.overflow属性：
- 4.nth-child( ) 与 nth-of-type( )的定义与用法
- 5.实现文本居中
- 6.box-sizing
- 7.margin和paddding
- 15.常用标签
- 考核重点：
-
-
- 一、点位：四种
- 二、css单位的种类和区别 em字节 px像素
- 三、颜色的表示方法
- 四、浮动float(none、left、right)
-
- 清除浮动的方法：
-
- CSS3的filter(滤镜)属性详解
-
一、网页（网站、网页）
网页构成的基本元素：图片、链接、文字、声音、视频，通常是**.htm和.html**为后缀命名的文件，因此称为HTML文件
什么是HTML: 是一种用来描述网页的一种语言
二、浏览器
作用就是读取html或htm文件（即HTML文档），并以网页的形式读取他们。
三、Web标准（使代码更规范更简介更通用）
三大构成：结构、表现、行为，结构更重要
HTML语法规范：
1.1尖括号、双标签、单标签（特殊,
包含和并列关系代码 ： 结构标签代码
**结构标签：**html,head、/head，body
结构标签的总结：
根标签、头部、身体三大部分
我利用vscode创建的第一个页面
写代码是一件快乐的事
lang语言："en"定义语言为英文，"zh-CN"定义语言为中文
声名标签，不属于html里面的标签
字符集，代表了各种字符，防止乱码
路径
1目录文件夹和根目录
2相对路径和绝对路径
相对路径：
绝对路径：文件所在电脑的具体位置
特殊字符（空格 +; 小于号<+; 大于号>+;）
常用标签：
1.语义标签：标题标签、段落和换行、不换行标签
标题标签：
不能像正常一样，按空格就能分段换行，需要用段落标签来操作。
段落标签：
强制换行：
强制不换行：
2.文本格式化标签（粗体倾斜、删除线、下划线）
3.
独占一行
div没有语义的标签，span是一个小盒子，是一个大盒子，用来装东西。可装图片或文字
4.图像标签
图像标签的属性：
图片需要与网页文件放在同一个文件夹中
alt：图片显示不出来时用 alt文字替换的方法
title：鼠标放在图片上能显示文字
width，heigth 设置图片的宽高，只设置一个时另一个会等比例自己缩放
复制图片地址导入自己的网页：
也可以复制网页中的图片地址，直接导入自己的网页中
图像标签注意事项：
5.超链接标签（重点）
1 语法格式
herf必须要写的属性（写在a后面）；两个a中间可加图片或文本
target（元素被链接到的目标元素）以什么方式打开：_self（默认值）当前的窗口打开，_blank新窗口中打开
**:target{display:block;} *target 是“伪类”后边的是样式设置
2 链接分类
1.外部链接 ：
2.内部链接：
3.空链接：
javascript:void(0) javascript: ；
4.下载链接：
5.网页元素超链接：
6.锚点链接： 两部曲
6.注释标签：
7.表格标签
表格的主要作用：清楚的展示数据
1.表格的基本语法：
2.表头单元格标签：（用th表示，table hand的缩写） ，效果居中加粗显示
三行三列：
3.表格的属性：
align对齐方式；border边框，1有边框，默认为” “ 无边框；cellpadding像素距离边框的距离；cellspacing单元格和单元格之间的空隙，默认2像素；width表格的宽度大小。
border-radius：（百分号或数字）圆角边框
border:10px solid #a1a1a1; 边框粗细和颜色
padding盒子内边距，会影响盒子实际大小，但不存在撑开盒子的情况
padding：7px 13px 0px；内边距上7，左右13，下0
4.表格结构标签：更加清晰简洁
5.合并单元格（rowspan 跨行；colspan跨列）：
目标单元格：代码写在需要合并的第一个单元格括号内
合并单元格三部曲：
8.列表标签（占一行）
1.无序列表：（ul li）（重点）
ul里面有li子，嵌套关系 。ul只能放li，li里面可以放很多东西
2.有序列表：（ol li理解）
ol里面有li子，嵌套关系 。ul只能放li，li里面可以放很多东西
3.自定义列表：（dl dt dd重点）
dl里面有dt和dd（dt和dd并列关系，dt大哥在上面）。
4.列表总结：
9.表单标签
1.表单的组成：表单控制、表单域、提示信息
2.表单域：（了解）
表单域就是form：
3.表单控件（表单元素input、select、texarea）
分为：
1.imput表单元素：
2.select下拉表单元素：
3.textarea文本域表格元素：（可以输入很多文本区域）
clls每行最多的字数，rows显示的行数
4.type属性：
1.radio多选一，checkbox复选框多选（他们名字必须都相同）。
2.添加value后，文本框中直接出现添加的value值；
3.给他们设置checked后，打开后默认已经被勾选；
4.maxlength=“6” 规定只能输入六个字符；
5.submit提交 加value修改自定义字体内容，点了之后可以把表单域中的表单元素送给后台服务器。
6.reset重置 加value修改自定义字体内容，点了之后表单域中所有的东西恢复原状
7.button普通按钮 后期搭配js使用
8.file文件域 需要上传文件时添加此功能
9.placeholder：用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖
10.lable标签
作用：点击名称也能填写内容空白块
css知识点总结
css单位详讲
(1条消息) 【CSS 单位 (详细介绍)】_Hey_Coder-CSDN博客_css单位
1.1 相对长度 单位
1.1.1 字体的 相对长度
⑴ em : (相对于 当前元素本身的 )字体大小 font-size 的倍数
⑵ rem : (根元素 html 标签的) 字体大小 font-size 的倍数
⑶ ex : x 的高度 (随 font-family , font-size 改变)
⑷ ch : 数字 0 的宽度 (随 font-family , font-size 改变)
1.1.2 视窗的 相对长度
⑴ vh : 视窗高度 的 1% (百分之一)
⑵ vw :视窗宽度 的 1%(百分之一)
⑶ vmin : vw 和 vh 中的 较小值 (宽/高较小值的 百分之一)
⑶ vmax : vw 和 vh 中的 较大值 (宽/高较大值的 百分之一)
♣ 视窗单位的 计算方法
1.1.3 百分比 单位 (%)
⑴ 定位 中的百分比
⑵ 盒模型 中的百分比
⑶ 文本 中的百分比
⑷ 边框 和 圆角 中的百分比
⑸ 背景 属性中的百分比
⑹ 变换 中的百分比
♣ 百分比值的 继承
1.2 绝对长度单位
⑴ px : 像素
⑵ cm : 厘米 ( 1/2.54 in , 38px)
⑶ mm : 毫米 (1/25.4 in, 3.8px)
⑷ in : 英寸 ( 1in = 96px ,2.54cm)
⑸ pc : 派卡 ( 1/6 in ,12pt, 16px)
⑹ pt : 点 (显示器上 一个个的点,1/72 in,1.3px)
♣ CSS 绝对单位的 换算关系
- 1in = 96px
- 1in = 2.54cm
- 1in = 25.4mm
- 1in = 72pt
- 1in = 6pc
- 1pc = 12pt
♣ 长度单位的 浏览器支持
- 长度单位的 浏览器支持
-
时间单位 (s , ms)
-
时间单位
CSS 中 两个常见的 时间单位
① 秒（s）
② 毫秒（ms）
换算: 1s = 1000ms。
搭配属性: 常用于 CSS 中 transition-duration、transition-delay、animation-duration 和 animation-delay 属性中。
2.频率单位 (Hz , kHz)
- 频率值的 使用位置: 在 听（或说）级联样式表中 使用.
- 频率的 两个单位值
- ① 赫兹（Hz）
- ② 千赫（kHz）
- 频率的作用
- 可以被用来 改变一个 语音阅读文本的 音调。
- 低频率是 低音
- 高频率是 高音
-
-
角度单位 (deg,rad,grads,turn)
-
⑴ 角度: deg
角度最常用的 用法
① 设置 旋转角度:
在CSS 中 给 旋转元素 设置一个旋转角度（度数），依赖于 CSS 的 transform 属性中的rotate()，skew() 函数等
② 渐变中的角度: linear-gradient(260deg,red,blue)
0deg = to top
角度缺省的默认值: to bottom = 180deg
⑵ 百分度（grads）：
一个分度，百分度 相对于 1/400 个整圆
跟角度单位一样，支持负值
负值表示逆时针方向，100grad = 90deg
⑶ 弧度（rad）：在 Canvas中 用到弧度
1rad = 180/π °（大约为 57.3deg）
1.570796326794897rad = 100grad = 90deg
rad = (π / 180) * deg
deg = (rad * 180) / π
⑷ 圈数（turn）：1turn = 360deg
-
目录：
1.为什么要用css：
HTML（结构）样式简单，只能写出元素，调试样式美化界面比较复杂。这时候就可以用css（样式）来美化网页，让布局更简单，更漂亮。
总结HTML和css：
2.css语法规范：
3.css代码风格：样式格式书写、样式大小写风格、样式空格风格
1.样式格式书写：（提倡用第二种）
2.样式大小写书写：
3.样式空格风格：
4.css基础选择器
1.作用：
2.选择器的分类：
1.标签选择器：
2.类选择器：
差异化选择类标签，单独选择一个或几个标签。样式点定义，结构类调用，一个或多个，开发最常用
命名时遵循类的命名规范，可多次使用。
语法：
多类名：
多类名的使用方法和好处：用空格把两个类名隔开；可以统一修改多个盒子
多类名的使用场景：
3.id选择器：
样式#定义，结构id调用，只能调用一次，别人切勿使用 .选择所有id内容
语法：
id选择器和类选择器的区别：
4.通配符选择器：
用*定义，表示网页中所有的元素。
语法：
开头选择器：pulse1 pulse2 pulse3 pulse4
5.基础选择器的总结：
5.CSS字体属性：
1.字体系列：
2.字体大小：
3.字体粗细：
4.文字样式：
5.字体符合属性：
正常字体粗细400，字体加粗用纯数字，字体大小尺寸加px。
简写方式：（倾斜方式、字体粗细、字体大小/字体行距、字体类型）
不能更换顺序，size和family不能省略
6.字体属性总结：
6.css文本属性：
1.文本颜色：
2.文本对齐：(test-align:)
水平：text-aline： 垂直：text-height
3.装饰文本：（test-decoration ）
4.文本缩进：（test-indent，常用于段落的首行缩进）单位px，em
px：缩进单位 em：缩进相对单位，2em表示缩进两个字的大小
5.行间距、段落行间距：（line-height:）单位像素：px
6.文本属性总结：
6.css引入方式：
1.css样式表
1.内部样式表：
css放到html内部，单独写到style内部 。 div
2.行内样式表：（结构简单的时候使用，适用比较少）
style属性开头=” ； “，内容写到引号中间，不同内容用分号隔开。
3.外部样式表：（用到比较多）
1.新建一个.css文件;
2.在html中用link引用.css文件：
rel href
4.引入方式总结：
切换自动换行：alt+z
5.综合案例：（https://www.bilibili.com/video/BV14J4114768?p=90）
字体大小/字体行距、字体类型；标题不加粗，标题居中；hr画横线。
6.调试工具：鼠标右键打开检查或F12
7.Emmt语法：
1.快速生成HIML结构语法：
点击tab出来
从demo1到demo5
带文本的多行输出；div{$}*5,文本内容从1到5；
2.快速生成css样式语法：
单词的首字母，快捷键
3.快速格式化规范代码：
右键：格式化文档或shift+alt+f 或安装插件 
8.复合选择器：（后代选择器、子选择器、并集选择器、伪类选择器）
1.后代选择器：（重要）
语法：
注意：
2.子选择器：（亲儿子选择器）
只能选择作为某元素的最近一级子元素，只能选择儿子不能选择孙子
语法：如：
3.并集选择器：（重要）
可以选择多组标签，同时为他们定义相同的样式，实现集体声明。
语法：
并集选择器中间用逗号隔开，逗号是”和“的意思 
4.伪类选择器：
用于给某些特殊的选择器中添加特殊效果，特点：用冒号”：“表示
1.链接伪类的基本属性
按顺序书写
a:link 未访问过的链接 ,a:link 把没有点击的（访问过的）链接选出来
a:visited 选择点击过的访问链接
a:hover 选择鼠标经过的
a:active 鼠标按下去没有松开时的属性
注意事项：顺序 love hate（你个伪君子，先喜欢在讨厌）
2.focus伪类选择器：
：focus 用于选取获得焦点（鼠标光标）的表单元素
主要针对表单来说，一般是 imput表单才能获取，注意没有空格
语法：
5.复合选择器总结：
9.元素显示模式：
1.块元素：
只占一行的，是个容器，宽高都可以设置
常见的块元素：
2.行内元素：
不会分段，无法设置宽高，行内只能容纳纯文本或其他行内元素。
特殊：链接里不能放链接；a里面可以放块级元素但给a转换成块级模式最安全。
3.行内块元素：
img、input、td，同时具有块元素和行内元素的特点
特点：具有行内元素的特点（不会分段），块级元素特点（宽高内外边距行高可控）
4.元素显示模式总结
5.元素显示模式转换
行内元素转换为块级元素：display： block
块级元素转换为行内元素：display： inline
转换为行内块元素：display： inline-block
10.css背景：
background：
1.背景颜色 background-color：颜色值；
默认值：transparnt（透明）
11.flex布局：
一行代码使布局平均分配，任何一种元素都可以改成flex布局
转换为flex布局： display： flex；
注意：
布局原理：
常见的父项属性：
flex-direction：设置主轴方向
justify-content：设置主轴上的子元素排列方式
注意：使用前先确定主轴方向是哪个。
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素排列方式（多行）
**注意：**适用于子项出现换行（flex-wrap：wrap）情况（多行，在单行是没有效果的）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
六大属性：
①order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
② flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
③ flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
④ flex-basis定义项目占据的主轴空间。(如果主轴为水平，则设置这个属性，相当于设置项目的宽度。 原width将会失效。)
⑤ flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
⑥ align-self:定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性。
属性值：与align-items相同，默认值为auto，表示继承父容器的align-items属性值。
11.grid布局：
开启布局：给外层元素添加：
设置每列的宽度：
固定宽度：
grid-template-colomn：100px 100px 100px
浮动宽度：
grid-template-colomn：1fr 2fr 1fr fr代表着每行的比例，如1fr=1/总数
设置间距：
列间距：
column-gap：列间距
row-gap：行间距
gap：行间距和列间距
排列元素：template（模板）
grid-template-areas
对齐：
垂直方向对齐子元素：（居中、靠下）
align-items：center，end
水平方向对齐子元素：（居中、靠右、两端）
justify-items：center、end、space-between
当行轨道和列轨道尺寸小于grid容器时：
垂直方向上：align-content（居中、靠下）
align-content：center、end
水平方向上：justify-content（居中、靠右、两端）
justify-content：center、end、space-between
12.position的属性：
position有以下属性：static、inherit、fixed、absolute、relative
前三个好理解好区分：
static：是默认状态，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
nherit：从父元素继承 position 属性的值。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。（即滚动浏览器的时候，元素永远固定显示在窗口可视区的某个位置）。
比较常用而且会引起初学者迷惑的是absolute和relative，它俩有什么分别呢？
一、先来看看W3C给的概念（定位是不占位置的）子绝父相
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
两者最核心的区别在于：absolute不受父元素里的其他元素影响，而relative会受到父元素里的其他元素影响。
绝对定位：position: absolute
绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。
绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。
相对定位：position: relative
相对定位：相对位置的坐标参考系是以自己上一次的位置（x，y）作为原点（0，0）。
注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
不用转换为块状：
加入绝对定位、相对定位浮动的行内元素
固定定位：
语法：
13.动画（-）（transform）
（1）过度（执行这个动作的时间）：（transtation）
过度写到本身上，谁做动画给谁加 transform：all 0.3s；
（2）元素的转换点：
语法：（原点） （起源）
默认中间：50% 50% 如设置左下角：
注意：
1.移动（treanslate）
移动盒子位置三种方法：定位、盒子外边距、2d转换
水平移动100px，垂直移动100px
1.语法：
2.注意：
参数可以用百分号，如50% 移动自身宽度的一半
水平居中垂直居中绝对定位 ：
top：50% left50%
transform：translate（-50%，-50%）/margin-top：-盒子的一半像素 ；margin-left：-盒子的一半像素
2.旋转：
1.语法：
2.注意：
3.旋转案例
3.缩放：
1.语法：transform：scale（x，y）；
不跟单位，数字就是倍的意思，x=2就是宽变为两倍
等比例缩放 语法：transform：scale（z）；括号里面只有一个数字
2.div：hover
3.优点：
不会影响其他盒子，可以设置中心点
4.连写：
注意：treanslate位移写在最前面
13.动画（二）：
1.步骤：
先定义动画，在使用（调用动画）
1.用@keyframes定义动画（类似于定义类选择器）：
语法：
0% 和 100% 可替换为 from 和to
百分比*时间=每个状态所用的时间
2.使用动画：
语法：
animation：卡通片绘制 duration：持续时间
3.动画属性
ease种类：
简写：
不包括：
linear（匀速），前两个要写上
动画的速度曲线：
opacity（透明度）
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1)（透视轮播图）
cubic-bezier即为贝兹bai曲线中du的绘制方法。
图上有四zhi点，P0-3，其中P0、P3是默认的dao点，对应了zhuan[0,0], [1,1]。而剩下的P1、P2两点则是shu我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。
预留的几个特效：
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
13.动画（三）：3D转换
透视写在父级中
知识点：
1.3D移动：transform：translate3d（x，y，z）
2.3D旋转：transform：rotate3d（x，y，z，deg）沿着自定义轴旋转deg角度
旋转方向：（左手法则）
左手法则：大拇指为x、y、z正方向，四指指的方向为正直（y轴正方向朝下）
xyz值要么是0，要么是1
3.透视：perspective
实现近大远小特点：改变perspective或z的大小（两者同时存在）
定义：
就是视距，透视越小，盒子越大,产生3d效果，在二维平面产生近大远小的特点
注意：写在父级元素中
4.3D呈现：transform-style
13.动画（四）：轮播图
1.z - index ：
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
*： z - index *（位置：绝对、位置：相对 或位置：固定]
代码：
轮播图-锚点
