h5 概念
h5 出现 为了 更好使用移动端web开发
h5: html5 html4 html5是html4升级版，多一些标签(狭义理解) header
h5: html5 代表着互联网技术发展一个阶段，是一套前端技术统称， 包括 html5 、css3、 新增一系列API；
h5 语法规范(了解)
特点： 更宽松 跟简洁
1-单标签 可以省略闭合符号 /
2-双标签 可以省略结束标签
3-骨架标签可以完全省略
注意：实际工作中不要太随意
h5 语义标签
h5语义标签
header 头部
nav 导航
aside 侧边栏
section 区块
article 文章
footer 底部
和div相同， 好处有语义 ，但是不兼容低版本ie
IE9 以下版本浏览器兼容HTML5的方法，使用html5shiv包
h5 表单类型和属性
表单属性
placeholder 占位符
multiple 文件多选
required 必填项
autofocus 自动聚焦
atuocomplete 自动完成 默认值为on 开启 off 关闭 提示功能
【案例】
<form>
<label>
用户名 <input type="text" name="username"
autofocus
placeholder="例如：狗蛋"
required
autocomplete="on"
/>
</label>
<label>
头像 <input type="file" name="file" multiple />
</label>
<input type="submit" value="提交数据" />
</form>
表单类型
之前css学过输入框： text password textarea
h5 提供很多人性化的 表单类型， 可以方便用户快速进行输入
简单记忆：
字符串类型的：text、email、url、search
数字类型的：number、tel、range
时间日期的：date、time、month、week、datetime-local
颜色：color
<form>
<label>用户名 <input type="text" /></label><br>
<label>email <input type="email" /></label><br>
<label>url <input type="url" /></label><br>
<label>number <input type="number" step="5" /></label><br>
<label>tel <input type="tel" /></label><br>
<label>search <input type="search" /></label><br>
<label>color <input type="color" /></label><br>
<label>range <input type="range" value="50" min="0" max="200" /></label><br>
<label>date<input type="date" /></label><br>
<label>time <input type="time" /></label><br>
<label>datetime-local <input type="datetime-local" /></label><br>
<label>month<input type="month" /></label><br>
<label> week <input type="week" /></label><br>
<input type="submit" value="提交数据" /><br>
</form>
h5 音视频
h5 之前 音频 视频： 使用第三方插件 flash 快播…
h5中，网页 只需 audio video 标签即可播放音频视频
<!--简单用 -->
<!-- <audio src="./music/hlw.mp3" controls></audio> -->
<!-- 兼容性处理 -->
<!-- ie678 -->
<!-- 不同浏览器支持文件格式不一致 .mp4 .mp3 .wav ... -->
<audio controls >
<!-- 尽可能多引入浏览器能支持格式 -->
<source src="./music/hg.mp3">
<source src="./music/hg.wav">
<source src="./music/hg.ogg">
<!-- 兼容ie678 给提示信息即可 -->
亲,浏览器版本太垃圾，请更新哦！
</audio>
<video src="./sources/movie01.mp4" controls></video>
H5 dom扩展
获取元素
document.querySelector() 获取满足条件第一个元素 dom对象
document.querySelectorAll() 获取所有满足条件的元素 伪数组
1-所有的数组都能使用自己原型上的forEach方法 ，
2-伪数组 是对象， 是不能使用数组的方法的
3-document.querySelectorAll() 返回的伪数组 也能使用forEach方法，因为原型上有提供
document.querySelector('div').style.background = 'red';
console.log( document.querySelector('div') );
console.log( document.querySelectorAll('div') );
document.querySelectorAll('div').forEach(function (v, i) {
v.style.background = '#f99';
})
类名操作
// 原生js
// div.className = 'box';
// jq:
// addClass();
// removeClass();
// hasClass();
// toggleClass();
// h5中新增classList属性，
// 在h5中所有元素 都新增一个classList属性， 这属性会把标签的类名封装到要给伪数组中， 如果操作类名，只需对这个伪数组进行增删改查即可；
// classList.add()
// classList.remove()
// classList.contains();
// classList.toggle()
【案例】
var box = document.querySelector('.box');
var btns = document.querySelectorAll('button');
// 添加
btns[0].onclick = function () {
box.classList.add('test');
}
// 删除
btns[1].onclick = function () {
box.classList.remove('test');
}
// 判断
btns[2].onclick = function () {
alert(box.classList.contains('test'));
}
// 切换
btns[3].onclick = function () {
box.classList.toggle('test');
}
自定义属性
命名规范：所有自定义属性 都以 data-开头
作用： 存储数据
<div class="box" title1="嘿嘿" closs="box" id="box1" title="呵呵" data-id="3" data-age="18" data-my-name="狗蛋" ></div>
<script>
var div = document.querySelector('div');
// console.log(div.getAttribute('class'));
// console.log(div.getAttribute('title1'));
// console.log(div.getAttribute('data-age'));
//在h5中 每个元素新增dataset属性， 将标签所有以data-开头的属性封装成一个对象，如果想操作data-开头属性，找dataset即可；
// my-name 在js中一个myName形式进行存储
console.log(div.dataset);
console.log(div.dataset.age);
console.log(div.dataset.myName);//data-my-name 中的-变为驼峰命名
div.dataset.myName = '大春哥';
div.dataset.id = 999;
</script>
css3选择器
复习css2选择器
* 通配符选择器
div 标签选择器
.box 类名选择器
#box id选择器
div p 后代选择器
div > p 子代
div,p 并集选择器
div.box 交集选择器
div + p 选中div后面第一个兄弟p标签
div ~ p 选中div后面所有的兄弟p标签
属性选择器
只写属性名，不写=号，表示包含属性名的元素
= 精确匹配
^= 开始
$= 结束
*= 包含
【案例】
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.选中有title这个属性的div */
/* div[title]{
color: blue;
} */
/* 2.选中title=aa的div */
/* div[title='aa']{
color: blue;
} */
/* 3.选中title以aa开头的div */
/* div[title^='aa']{
color: blue;
} */
/* 4.选中以aa结尾的div */
/* div[title$='aa']{
color: blue;
} */
/* 5.选中包含aa的div */
div[title*='aa']{
color: blue;
}
</style>
</head>
<body>
<div title="aa">aaaa</div>
<div title="aabb">aabb</div>
<div title="bbaa">bbaa</div>
<div title="ddaabbcc">ddaabbcc</div>
<div>xxx</div>
</body>
</html>
结构伪类选择器
伪类： 一个冒号 ：
:first-child 第一个
:last-child 最后一个
:nth-child(n) 从前向后选中n个
:nth-last-child(n) 从后向前 选中n个
-n+5 选中前5个
2n 偶数
2n+1 奇数
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.选中第一个 */
/* li:first-child{
color: red;
} */
/* 2.选中最后一个 */
/* li:last-child{
color: green;
} */
/* 3.选中第n个，比如第2个 */
/* li:nth-child(2){
color: blue;
} */
/* 4.选中偶数-两种写法*/
/* li:nth-child(2n){
color: red;
}
li:nth-child(even){
color: blue;
} */
/* 5.选中奇数-两种写法 */
/* li:nth-child(2n+1){
color: blue;
}
li:nth-child(odd){
color:red;
} */
li:nth-child(-n+5){
color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
注意： 选中元素类型必须和选择器指定类型一致，否则无效(前后要一致)
结构伪类选择器，在排序时不分类型；选择元素 分类型
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 无效 */
/* p:nth-child(1){
color: red;
} */
/* 有效 */
/* h2:nth-child(1){
color: red;
} */
/* 有效 */
#aaa:nth-child(1){
color: red;
}
</style>
</head>
<body>
<div>
<h2 id="aaa">h2h2h2</h2>
<p>ppp</p>
<span>span,span,span</span>
</div>
</body>
</html>
empty伪类选择器
作用：选中空盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 200px;
border: 1px solid red;
margin: 10px;
}
/* 选中空盒子 :empty */
div:empty{
background: skyblue;
}
</style>
</head>
<body>
<div></div>
<div>我是有内容的</div>
</body>
</html>
not排除伪类选择器
语法： :not(选择器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 50px;
border: 1px solid #000;
margin: 20px auto;
}
/* div:not(#box3){
background: skyblue;
} */
/* div:not(.box3){
background: skyblue;
} */
div:not(:nth-child(3)){
background: skyblue;
}
</style>
</head>
<body>
<div class="box1" id="box1"></div>
<div class="box2" id="box2"></div>
<div class="box3" id="box3"></div>
<div class="box3" id="box31"></div>
<div class="box3" id="box32"></div>
<div class="box3" id="box33"></div>
<div class="box4" id="box4"></div>
</body>
</html>
target伪类选择器
语法： :target 可以选中当前被激活的锚点
html
<nav>
<a href="#m1">模块1</a>
<a href="#m2">模块2</a>
<a href="#m3">模块3</a>
<a href="#m4">模块4</a>
<a href="#m5">模块5</a>
</nav>
<h1 id="m1">模块一</h1>
<div>模块一内容</div>
<h1 id="m2">模块二</h1>
<div>模块二内容</div>
<h1 id="m3">模块三</h1>
<div>模块三内容</div>
<h1 id="m4">模块四</h1>
<div>模块四内容</div>
<h1 id="m5">模块五</h1>
<div>模块五内容</div>
css
h1:target {
color: green;
background-color: #f99;
font-size: 30px;
}
当点击a标签跳转到对应的锚点时,被激活的锚点h1就会响应的变色
伪元素和伪元素选择器
伪元素
伪元素： 符号： ::
::before,
::after
伪元素： 假的标签 用样式模拟出结构效果， 用css模拟出html效果
伪: 假的
元素： 标签
用样式模拟出结构效果， 用css模拟出html效果
1-伪元素 【默认是行内元素】
2-伪元素 是标签子元素，在【盒子内部前后】模拟出来两个标签的效果
3-伪元素【必须有content 】
4-伪元素 没有语义， 一般用于一些没有语义修饰效果地方，简化页面结构；
【案例】
/* span内部的前面添加一个块元素 */
span::before{
background: skyblue;
content: 'qqq';
width: 100px;
height: 100px;
display: block;
}
/* span内部的后面添加一个块元素 */
span::after{
background: deeppink;
content: 'hhh';
width: 100px;
height: 100px;
display: block;
}
【利用伪元素清除浮动带来的影响】
.clearfix::after {
content: ""; //伪元素必须给这个content=''
display: block; // 必须块级才能清除
clear: both; // 核心代码
/*保证伪元素在页面中看不到*/
height:0;
line-height:0;
visibility:hidden;
}
伪元素选择器
/* 对第一个字符设置 */
div::first-letter{
color: red;
font-size: 30px;
/* 文字会自动环绕在浮动元素周围 */
float: left;
}
/* 对第一行设置，这里不会覆盖first-letter */
div::first-line{
color: blue;
}
/* 文字选中后的样式 */
div::selection{
color:brown
}
其它选择器
:focus 查找获取到焦点的文本框
:checked 获得选中的checkbox
:disabled 获得不可用的框
:enabled 获得可用的框
:not(selector)选择不匹配selector的那些元素
:target 获取当前活跃的锚点链接
颜色(RGBA HSLA)
rgba
RGBA是代表Red（红色）Green（绿色）Blue（蓝色）和Alpha(透明度)的色彩空间
div{
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.5);
color: rgba(0, 255, 0, .4);
}
hsla(了解)
hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
HSLA 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。
- 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
- 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
- 亮度（L） 取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
- 透明度（A） 取值 0~1 之间， 代表透明度。
#p1 {background-color:hsl(120,100%,50%,0.3);} /* 绿色 */
#p2 {background-color:hsl(120,100%,75%,0.3);} /* 浅绿 */
#p3 {background-color:hsl(120,100%,25%,0.3);} /* 暗绿 */
#p4 {background-color:hsl(120,60%,70%,0.3);} /* 柔和的绿色 */
阴影
文字阴影
语法：text-shadow: h-shadow v-shadow blur color;
注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。参阅 CSS 颜色值。 |
div{
font-size: 30px;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
}
盒子阴影
语法：box-shadow: h-shadow v-shadow blur spread color inset;
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影（内阴影）默认是外阴影 |
【盒子阴影案例】
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
浏览器私有前缀
解决css3在浏览器中兼容问题： 加各个浏览器的私有前缀
-webkit- 谷歌 苹果
-moz- 火狐
-ms- ie
-o- 欧朋
例如：
div {
width: 1000px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
/* 解决css3在浏览器中兼容问题： 加各个浏览器的私有前缀
-webkit- 谷歌 苹果
-moz- 火狐
-ms- ie
-o- 欧朋
*/
background: -webkit-linear-gradient(right, red, yellow);
background: -moz-linear-gradient(right, red, yellow);
background: -ms-linear-gradient(right, red, yellow);
background: -o-linear-gradient(right, red, yellow);
background: linear-gradient(right, red, yellow);
}
盒子模型(box-sizing)
CSS3中可以通过box-sizing 来指定盒子模型，即可指定为content-box、border-box，这样计算盒子大小的方式就发生了改变。
可以分成两种情况：
1、box-sizing: border-box 盒子大小为 width （内减模式）
2、box-sizing: content-box(默认) 盒子大小为 width + padding + border (外加模式)
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin: 10px auto;
background: dodgerblue;
}
div:nth-child(2),div:nth-child(3){
border: 20px solid #000;
padding: 30px;
}
div:nth-child(2){
box-sizing: content-box;/*默认值 外加模式 */
}
div:nth-child(3){
/*内减模式 设置边框 和padding 不会撑大盒子，不会影响布局*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
背景
在css2中已经有background属性了，用于设置盒子的背景相关的一些样式，在CSS3中新增加了几个背景相关的几个属性。
background-size
设置背景图片的大小
/*注意：这两种设置方式会导致图片失真。*/
background-size: 600px 400px;
/* 百分比是相对于盒子的宽度和高度 */
background-size: 100% 100%;
不失真的设置方式（等比例缩放）
/*contain保证等比例缩放,且图片能完整显示，但是盒子会出现留白*/
background-size: contain;
/*cover保证等比例缩放,并且不会留白，但是出现有一部分图片不显示*/
background-size: cover;
【案例】
div{
width: 500px;
height: 500px;
border: 1px solid red;
background: url(./sources/aa.jpg) no-repeat;
/* background-size: 500px 500px; */
/* background-size: 100% 100%; */
/* background-size: contain; */
background-size: cover;
}
background-clip(了解)
背景裁剪： 指定背景图片从盒子模型的那个盒子开始裁剪
/*盒子的背景区域是整个盒子，包括边框和padding*/
/*默认值，设置背景区域包括了边框*/
background-clip: border-box;
/*背景区域只包含padding和content*/
background-clip: padding-box;
/*背景区域只包含content*/
background-clip: content-box;
【案例】
div {
width: 400px;
height: 400px;
border: 25px solid rgba(0, 0, 255, 0.3);
padding: 25px;
background: url('./sources/aa.jpg') no-repeat;
/* 背景裁剪： 指定背景图片从盒子模型的那个盒子开始裁剪
background-clip:
content-box
padding-box
border-box
*/
background-origin: border-box;
background-clip: border-box;
background-clip: content-box;
background-clip: padding-box;
}
background-origin(了解)
设置背景图片的原点的位置，默认是padding的地方开始平铺
background-image: url(images/bg.jpg);
/*设置原点从border开始*/
background-origin: border-box;
/*设置原点从padding开始,默认值*/
background-origin: padding-box;
/*设置原点从content开始*/
background-origin: content-box;
【案例】
div {
width: 400px;
height: 400px;
border: 25px solid rgba(0, 0, 255, 0.3);
padding: 25px;
background: url('./images/aa.jpg') no-repeat;
/* 背景原点： 指定背景图片从盒子模型的那个盒子开始平铺
background-origin:
content-box
padding-box
border-box
*/
background-origin: padding-box;
background-origin: content-box;
background-origin: border-box;
}
多重背景
background设置背景的时候，可以设置多个背景图片，使用逗号隔开。注意颜色只能设置一次，并且通常来说，颜色都是在最后面进行设置。
background是一个合写的属性，如果在background之前设置了background相关的样式，会被覆盖掉。
background: url(images/mn1.jpg) no-repeat top left, url("images/mn2.jpg") no-repeat right bottom, pink;
渐变
线性渐变
指沿着某条直线朝一个方向产生的渐变效果。
background-image: linear-gradient(渐变方向， 开始颜色 百分比， 结束颜色 百分比)
方向： to right left top bottom 45deg deg角度 （默认：to bottom）
【案例】
//注意：渐变实际上相当于一张图片，因为需要加给background-image才会生效
//渐变的两个要求：有区间，有颜色变化。
//最简单的渐变
background-image: linear-gradient(red, green);
//设定渐变的方向 to right 表示从左到右
background-image: linear-gradient(to right, red, green);
//也可以设定渐变的角度
background-image: linear-gradient(45deg, red, green);
//设定渐变的范围
background-image: linear-gradient(to right, red 20%, green 80%)
//每一个区间表示渐变颜色的范围
background-image: linear-gradient(to right, red 20%, green 20%)
渐变方向
径向渐变
指从一个中心点开始沿着四周产生渐变效果
radial-gradient(辐射半径 at 中心点位置 ,起始颜色 百分比， 终止颜色 百分比)
辐射半径 ： 圆形 一个半径 椭圆： 两个半径
中心点位置： at left top bottom center right 也可以指定坐标 —》 at 80px 80px
【案例】
/*1. 最简单的渐变*/
background-image: radial-gradient(red, green);
/*2. 指定圆的半径和圆心*/
background-image: radial-gradient(200px at center, red, green);
/*3. 指定椭圆*/
background-image: radial-gradient(200px 80px at center, red, green);
/*4. 指定范围*/
background-image: radial-gradient(200px at center, green 50%, red 50%);
注意：radial-gradient里面只有两个 , 号
过渡
transition：过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
关于补间动画与帧动画
- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。比如电影胶片
- 补间动画：补间动画只需要起始状态和终止状态，浏览器会自动完成中间的过渡。[http://mux.alimama.com/posts/1009](http://mu x.alimama.com/posts/1009)
特点： 由一种状态 贱贱(渐渐)的 变化到另一个状态过程；
属性合写
/*属性 时间 延时 速度 多个属性用,隔开*/
transition: width 1s 3s linear, height 3s 1s ease;
过渡的注意点：
- 过渡必须要有两个状态的变化。
- 过渡可以写在A状态，也可以写在B状态，但是如果写在B状态，那么回来的时候，就没有过渡效果了。
过渡的属性
//transition-property：设置过渡属性
//也可以是width,height
transition-property:all;
//transition-duration:设置过渡时间
transition-duration:1s;/*过渡的时间*/
//transition-delay：设置过渡延时
transition-delay:2s;/*2秒之后才进行动画*/
//transition-timing-function:设置过渡的速度
//linear，ease，ease-in，ease-out，ease-in-out， steps(10)
transition-timing-function:linear;
关于过渡的速度属性
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
2D变换
transform: 转换，是CSS3最具颠覆性的几个特性之一，既可以用于2D转换，也可以用于3D转换。
transform：2D转换，元素在平面上实现移动、旋转、缩放、斜切等操作
scale缩放
transform: scaleX(0.5);//让宽度变化
transform: scaleY(0.5);//让高度变化，注意不能写多个transform，不然会覆盖。
transform: scale(0.5);//让宽度和高度同时变化
注意：
- scale接收的值是倍数，因此没有单位
- scale可以是一个值，如果是一个值，宽度和高度都会等比例缩放。大于1 放大 小于1 缩小
- 可以通过transform-origin设定变换原点
【案例】
div{
width: 200px;
height: 200px;
background: skyblue;
transition: all 1s;
}
div:hover{
/* 缩小一半 */
/* transform:scaleY(0.5);
transform:scaleX(0.5); */
transform: scale(0.5);
}
rotate旋转
transform: rotate(360deg);//旋转360度
transform: rotate(-360deg);//逆时针旋转360度
注意：
- 单位是deg，角度，不是px
- 正值顺时针转，负值逆时针转
- 可以通过transform-origin设定旋转原点
- 转换原点写在A状态，不能写在B状态
translate平移
transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px, 100px);
transform: translate(50%, 50%);
注意：
- translate的值可以是px，也可以是百分比，如果是百分比，那么参照的是自身的宽高。
- translate移动的元素并不会影响其他盒子，类似于相对定位。
skew斜切
skew在实际开发中，是用的最少的一个属性。一般来说，x和y只会倾斜其中的一个
/*在水平方向倾斜30deg*/
transform: skewX(30deg);
/*在垂直方向倾斜30deg*/
transform: skewY(30deg);
【斜切说明】斜切会和另一个轴产生夹角！
transform-origin转换原点
通过transform-origin可以设置转换的中心原点。
transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。参考的是盒子自身的x和y的坐标，比如 0 0就是盒子的左上角 center center就是盒子的中心点
transform-origin: center center;
transform-origin: 40px 40px;
transform连写
transform:translateX(800px) scale(1.5) rotate(360deg) ;
//1. transform属性只能写一个，如果写了多个会覆盖
//2. transform属性可以连写，但是顺序对效果影响的，因为它会在第一个效果的基础上执行第二个效果，然后执行第三个效果（通常会把rotate放后面）
//3. 如果对transform进行过度效果的时候，初始状态和结束状态一一对应
3D变换
transform:不仅可以2D转换，还可以进行3D转换。
参考资料：3D变换
坐标轴
用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的。 X轴和Y轴和2D变换时候一样，多了一个Z轴，可以理解为面向自己的眼睛反方向
rotate旋转
transform: rotate(45deg);// 让元素在平面2D中旋转
transform: rotateX(45deg);// 让元素沿着X轴转45度
transform: rotateY(45deg);// 让元素沿着Y轴转45度
transform: rotateZ(45deg);// 让元素沿着Z轴转45度
/* 透视 不开看不到3d效果*/
perspective: 100px;
translate平移
/*沿着X轴的正方向移动45px*/
transform: translateX(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateY(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateZ(45px);
/* 透视 不开看不到3d效果*/
perspective: 100px;
perspective透视
电脑显示屏是一个2D的平面，所以看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。说白了，设置了perspective属性后，就有了进大远小的效果了，在视觉上，就能看出来3d的效果。
注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
perspective：500px;
关于近大远小
透视本质上设置的是用户的眼睛和屏幕的距离；
对于我们眼睛来说，离我们越近的房子，我们会感觉到这个房子越大，离我们越远的房子，就会感觉越小，其实房子的大小都是一样的，只是在视觉上的一种不同。
【透视案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.out {
width: 400px;
height: 400px;
border: 1px solid #000;
background-color: skyblue;
margin: 50px auto;
/* 透视 */
perspective: 400px;
/* 辅助 */
transform: rotateY(10deg);
}
.in {
width: 200px;
height: 200px;
margin: 100px;
background-color: red;
transition: transform 1s;
transform-origin: right;
transform: rotateY(100deg);
}
.out:hover .in {
transform: rotateY(100deg);
}
/*
透视：
1-透视 设置 用户眼睛 和 屏幕的距离
2- 透视加给变换元素父元素
3- perspective
4- 实现近大远小 效果
5- 透视仅仅只是一种视觉上呈现， 并不是真正的3d
*/
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>
transform-style
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性只能给父元素添加。可选值：
flat:默认值，2d显示
preserve-3d: 3d显示
transform-style与perspective的区别
/*透视：透视只是相当于设置了一个距离，辅助我们查看3D效果的工具，*/
/*preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。 */
//一个3d元素可以没有perspective，但是不能没有transform-style
注意： 3D 变换中旋转 ，对着正方向去看，正值都是顺时针 负值是逆时针
【真正的3d】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.out {
width: 400px;
height: 400px;
border: 1px solid #000;
background-color: skyblue;
margin: 50px auto;
/* 辅助 */
transform: rotateY(10deg) rotateX(0deg);
/* 让子盒子保持真正3d效果 */
transform-style: preserve-3d;
}
.in {
width: 200px;
height: 200px;
margin: 100px;
background-color: red;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>
backface-visibility
//指定元素背面面向用户时是否可见。
//visible： 指定元素背面可见，允许显示正面的镜像。
//hidden： 指定元素背面不可见
//注意：只有在3d的情况下，backface-visibility才会生效
动画
动画也是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。
动画与过渡的区别：
1. 过渡必须触发，需要两个状态的改变。
2. 动画可以一直运行下去，不需要触发。实现效果与过渡差不多
使用一个动画的基本步骤：
1.通过@keyframes指定动画序列
2.通过百分比或者from/to将动画分割成多个节点
3.在各个节点中分别定义动画属性
4.通过animation将动画应用于相应的元素
动画入门
【动画入门案例】
div{
width: 200px;
height: 200px;
background: skyblue;
/* 调用动画
infinite 无限循环动画,不加这个只会执行一次
alternate 反复(来回都有动画),不加这个回去的时候没动画*/
animation: gun 1s infinite alternate 1s;
}
/* 定义动画 */
@keyframes gun {
/* 起始状态 */
from{
transform: translateX(0) rotate(0deg);
}
/* 结束状态 */
to{
transform: translateX(500px) rotate(360deg);
}
}
【动画-百分比定义多组动画】
div {
width: 100px;
height: 100px;
background-color: red;
margin: 100px;
/* 调用动画 */
animation: move 4s alternate 4;
}
/* 定义动画 */
/* 百分比分的是时间 */
@keyframes move {
0%{
transform: translate(0, 0);
}
5%{
transform: translate(800px, 0);
background-color: blue;
border-radius: 50%;
}
50%{
transform: translate(800px, 400px);
background-color: yellow;
border-radius: 0;
}
55% {
transform: translate(0, 400px);
background-color: green;
border-radius: 50%;
}
100%{
transform: translate(0, 0);
}
}
animation详解
animation是一个复合属性，一共有8个参数
animation-name:动画名称，由@keyframes定义的
animation-duration：动画的持续时间
animation-timing-function：动画的过渡类型
animation-delay：动画的延迟时间
animation-iteration-count：动画的循环次数
animation-direction：设置动画在循环中是否反向运动
animation-fill-mode：设置动画时间之外的状态
animattion-play-state:设置动画的状态。
【animation详解】
div {
width: 100px;
height: 100px;
background-color: red;
margin: 100px;
/* 调用 */
/* 复合属性： */
/* animation:move 1s 3 alternate linear; */
/* 单一属性： */
/* 动画名称 */
/* animation-name: move; */
/* 持续时间 */
/* animation-duration: 4s; */
/* 执行次数 infinite 无数次*/
/* animation-iteration-count: 1; */
/* 动画方向 alternate 反复*/
/* animation-direction: alternate; */
/* 动画延迟 */
/* animation-delay: 1s; */
/* 动画结束时保持状态 */
/* backwards: 动画结束后，会回到动画开始前状态
forwards： 动画结束后， 会保持动画结束时状态不变
*/
/* animation-fill-mode: forwards; */
/* 动画运动方式 linear ease-in-out steps(n)*/
/* steps(n) 让动画分n步完成 */
/* animation-timing-function: steps(19); */
/* 动画名称 和持续时间 必须，后面参数 顺序随意 都可以省略 */
animation: move 1s alternate 1 steps(18) 1s forwards ;
}
/* 定义动画 */
@keyframes move {
0% {
transform: translateX(0) rotate(0);
}
100% {
transform: translateX(600px) rotate(800deg);
}
}
【动画播放状态】
div {
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
/* 调用动画 */
animation: rot 2s infinite linear;
}
div:hover {
/* 动画暂停 */
animation-play-state: paused;
}
@keyframes rot {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
【steps的使用】
div {
width: 5px;
height: 200px;
background-color: #daa520;
margin: 100px auto;
border-radius: 50% 50% 0 0;
transform-origin: center bottom;
/* 调用动画 */
animation: rot 20s steps(30);
}
@keyframes rot {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
animate动画库的使用
官网：http://www.animate.net.cn/
下载文件地址（下方是使用方法）：https://www.dowebok.com/98.html
web字体
开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。
支持程度比较好，甚至IE低版本浏览器也能支持。
web字体（了解）
阿里妈妈：http://iconfont.cn/webfont/#!/webfont/index
有字库：http://www.youziku.com/
1.第一步：使用font-face声明字体
2.第二步：定义使用webfont的样式
3.第三步：为文字加上对应的样式
4.在CSS3中，可以通过@font-face定义新的字体。
字体图标（重点）
我们经常把网页常用的一些小的图标，做成精灵图，然后通过background-position去调整位置，但是这个需要引入图片，并且图片大小改变之后如果失真。在CSS3中可以使用字体图片，即使用图标跟使用文字一样。
优点：
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；
Font Awesome 使用
http://fontawesome.dashgame.com/
阿里巴巴矢量图标：（可以自己定制）
http://www.iconfont.cn/plus/collections/index?type=1
flex伸缩布局
布局：其实就是调整元素在水平和垂直方向上的布局方式。
CSS3在布局方面做了非常大的改进，使得对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
当给一个盒子设置了display：flex之后，这个盒子就有了主轴 和侧轴 的概念。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右 ，默认侧轴从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
flex-direction
flex-diretion主要是用来调整主轴的方向的，默认是水平方向
了解即可，一般来说，很少调整主轴的方向。
可选值
row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。
justify-content(重点)
justify-content主要用来设置主轴方向的对齐方式 ，可选的值有：
可选值：
flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。
align-items(重点)
align-items用于调整侧轴的对其方式 ，可选的值有：
flex-start： 元素在侧轴的起始位置对齐。
flex-end： 元素在侧轴的结束位置对齐。
center： 元素在侧轴上居中对齐。
stretch： （默认值）元素的高度会被拉伸到最大（不能给死高度）。
flex-wrap
flex-wrap属性控制flex容器是单行或者多行,默认不换行
nowrap： 不换行（默认），会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。
align-content
align-content用来设置多行的flex容器的排列方式。
flex-start： 各行向侧轴的起始位置堆叠。
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-between： 各行在侧轴中平均分布。
space-around： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch：拉伸，【不设置高度的情况下】。
align-items与align-content的区别: 一个单行，一个多行
align-items调整的是侧轴的对其方式，不换行一般用align-items
align-content:必须是多行才生效，如果单行，没有效果。换行了就用align-content。
flex属性
上述讲的属性都是给父盒子设置的，接下来的几个属性是给子盒子设置的。
flex属性 设置子元素在父元素中宽度比值
flex:1
下面这些场景都可以使用flex属性,固定的就写宽度，自适应的就写flex
左侧固定 右侧自适应布局
两端固定 中间自适应
中间固定 两端自适应
order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
order:1;
网络状态
在移动端，经常需要检测设置是在线还是离线
网络状态属性
HTML5定义了一个navigator.onLine属性，这个属性用于检测设备是否联网。navigator.onLine 在不同浏览器中有细微的差别。
navigator.onLine返回用户当前的网络状况，是一个布尔值
1. 如果浏览器连不上网(包括局域网)，就是离线状态，也就是脱机状态，会返回false
2. 否则就是在线状态，返回true
注意：返回true不一定就是说一定能访问互联网，因为有可能连接的是局域网。但是返回false则表示一定连不上网。
网络状态事件
为了更好的确定网络是否连接，HTML5还定义了两个事件，用于监听网络状态的变化。
//网络连接时会被调用
window.addEventListener("online", function () {
alert("online");
});
//网络断开时会被调用
window.addEventListener("offline", function () {
alert("offline");
});
地理位置
在HTML规范中，增加了获取用户地理信息的API，这样可以基于用户位置开发互联网应用，即基于位置服务LBS(Location Base Service)
隐私
HTML5规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。在获取地理位置之前，会询问用户，只有在获得许可之后，才能获取到用户的位置信息。
相关的方法
//successCallback:获取成功后会调用,并返回一个position对象，里面包含了地理位置信息
//获取失败了会调用，并返回error对象，里面包含了错误信息。
//获取当前的地理位置信息
navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
//重复的获取当前的地理位置信息
navigator.geolocation.watchPosition(successCallback, errorCallback)
实例：
navigator.geolocation.getCurrentPosition(function(position){
// 定位成功会调用该方法
// position.coords.latitude 纬度
// position.coords.longitude 经度
// position.coords.accuracy 精度
// position.coords.altitude 海拔高度
}, function(error){
// 定位失败会调用该方法
// error 是错误信息
});
在iOS 10中，苹果对webkit定位权限进行了修改，所有定位请求的页面必须是https协议的。
百度地图
仅仅获取到经纬度对于用户来说意义并不大，因为用户也不知道经度和纬度表示的是地球上的哪一个地方，因为我们可以结合百度地图，准确的将用户的位置显示出来。
1. 在开发中，找到javascript API
2. 直接查看示例demo
3. 复制相应的代码，替换掉秘钥就行，秘钥只需创建一个新的应用就可以了。
web存储
在代码执行的时候，数据都是存储在内存中的，当页面关闭或者浏览器关闭的时候，内存就被释放掉了。数据只有存储在硬盘上，才不会被释放。
【01-web存储初体验.html】
//存储在内存中，会被释放
var str = "hello world";
console.log(str);
//存储在硬盘上，不会被释放
localStorage.setItem("name", "张三");
console.log(localStorage.getItem("name"));
cookie(了解)
传统方式，我们以document.cookie进行存储，但是存储起来特别麻烦，并且，存储大小只有4k，常用来做自动登录，即存储用户的账号和密码信息。每次请求都会带上cookie
【02-cookie存储.html】
cookie是以字符串形式存在的，这个字符串有固定的格式：key=value;key1=value1;
在获取cookie内容时，一般需要通过正则或者字符串的方法进行处理，转换成对象，最终得到数据。
document.cookie = "name=zhangsan";
document.cookie = "age=18";
document.cookie = "sex=23";
//读取cookie
var result = document.cookie;
console.log(result);//name=zhangsan; age=18; sex=23
使用cookie：操作太麻烦，最多只能存储4k ,尤其是cookie的获取和删除操作,每次请求都会带上cookie，所以用户名和密码、还有sessionID会存储在cookie中
使用jquery.cookie插件，能够简化我们的操作。(了解)
【03-cookie存储（jquery插件）.html】
//设置cookie
$.cookie("name", "zs");
//获取cookie
console.log($.cookie("name"));
//删除cookie
$.removeCookie("name");
sessionStorage与localStorage
HTML5规范提出了解决方案，使用sessionStorage和localStorage存储数据。设置、读取、删除操作很方便
window.sessionStorage的特点
1. 生命周期为关闭浏览器窗口
2. 不能在多个窗口下共享数据。
3. 大小为5M
window.localStorage的特点
1. 永久生效，除非手动删除
2. 可以多个窗口共享
3. 大小为20M
window.sessionStorage与window.localStorage的方法
setItem(key, value) //设置存储内容
getItem(key) //读取存储内容
removeItem(key) //删除键值为key的存储内容
clear() //清空所有存储内容
key(n) //以索引值来获取存储内容
面试题：请描述一下cookies，sessionStorage和localStorage的区别？
文件读取
通过FileReader对象可以读取本地存储的文件，可以使用 File 对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的 DataTransfer
files
对于file类型的input框，在这个DOM对象中，存在一个files属性，这个属性是FileList对象，是一个伪数组，里面存储着上传的所有文件，当input框指定了multiple属性之后，就可以上传多个文件了。
也就是说，通过files这个属性，我们就可以获取到所有上传的文件。
file对象
File对象中包含了文件的最后修改时间、文件名、文件类型等信息。
FileReader对象
FileReader是一个HTML5新增的对象，用于读取文件。
//创建一个fileReader对象
var fr = new FileReader();
//读取文件的两个方法
//readAsText() 以文本的方式读取文件 ,文本文件
//readAsDataURL() 以DataURL形式读取文件，图片，视频
//文件读取完成事件：
fr.onload = function(){}
//当文件读取完成，可以通过result属性获取结果
fr.result
参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc
【案例】
var file = document.getElementById("file");
var box = document.getElementById("box");
file.addEventListener("change", function () {
console.dir(file);
//files:里面存储了所有上传的文件
//这个data就是我们上传的那个文件
var data = file.files[0]
//1. 创建一个文件读取器
var fr = new FileReader();
//2. 让文件读取器读取整个文件
fr.readAsDataURL(data);
//3. 等待文件读取完
//onload：文件读取完成后，就会触发
fr.onload = function () {
var img = document.createElement("img");
img.src = fr.result;
box.innerHTML = "";
box.appendChild(img);
}
});
拖拽
在HTML5的规范中，可以通过为元素增加draggable=”true”来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。
拖拽元素
页面中设置了draggable=”true”属性的元素，其中<img>、<a>标签默认是可以被拖拽的
目标元素
页面中任何一个元素都可以成为目标元素
事件监听
根据元素类型不同，需要设置不同的事件监听
//1、拖拽元素
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragend 应用于拖拽元素，当拖拽结束时调用
//2、目标元素
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用(浏览器默认不让拖拽，需要阻止的默认行为。
【拖拽案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box ,
.target {
width: 400px;
height: 400px;
border: 1px solid red;
}
span {
float: left;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border: 1px solid blue;
background-color: hotpink;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
}
.target {
position: absolute;
left: 600px;
top: 200px;
}
</style>
</head>
<body>
<div class="box">
<span draggable="true" >1</span>
<span draggable="true" >2</span>
<span draggable="true" >3</span>
<span draggable="true" >4</span>
<span draggable="true" >5</span>
<span draggable="true" >6</span>
<span draggable="true" >7</span>
<span draggable="true" >8</span>
</div>
<div class="target"></div>
<script>
//需求： 当.box中span 被拖拽到 .target中后并且松开手鼠标， 就将span添加到target中
//实现：
// 1-记录当前被拖拽span标签
// 2-如果在目标元素上松开了鼠标，将刚才记录这个元素添加到 target中
var spans = document.querySelectorAll('span');
var target = document.querySelector('.target');
var current = null; //记录当前被拖拽span
//1-记录当前被拖拽span标签
//forEach(function(当前元素，当前元素的索引值， 当前数组) {})
spans.forEach(function (v, i, arr) {
v.ondragstart = function () {
current = this; //用current 记录当前被拖拽元素
//console.log(current);
}
})
// 2-如果在目标元素上松开了鼠标，将刚才记录这个元素添加到 target中
target.ondragover = function (e) {
e.preventDefault(); //阻止默认行为
}
target.ondrop = function () {
//将刚才拖拽元素放到 target中
this.appendChild(current);
}
</script>
</body>
</html>