H5新特性
- 新语义元素
一些标签是div标签的语义化转化，过去我们曾用div来包裹某一个块或者组件，现在使用这些标签实现语义化，有利于代码可读性和SEO（优化），语义元素在IE6~8的兼容可以使用 - 本地存储
sessionStorage、loacalStorage和indexDB加强本地存储，使用前应先判断是否支持情况。
异同：（加一个cookie、token这两只是比较，不是H5新特性）
sessionStorage: 基于会话，关闭浏览器之后存储消失；存储大小一般为5MB；仅存储在客户端，不参与服务器（即浏览器）的通信
localStorage: 本地永久存储；存储大小一般为5MB；仅存储在客户端，不参与服务器的通信
cookie: 存储大小限制为4kb左右；每个域的cookie数量是有限的；可设置失效时间；每次都会携带在HTTP头中，使用过多cookie会带来性能问题
indexedDB: 浏览器提供的本地数据库,可以被网页脚本创建和操作；开发上限为250MB，提供查找接口，还能建立索引；就数据库类型而言，IndexedDB更接近与NoSQL数据库（非关系型数据库）。
token: (1)完全由应用管理，它可以避开同源策略(2)可以避免CSRF攻击(3)可以是无状态的，可以在多个服务间共享。 可以在服务端持久化（比如存入数据库）。 - 离线web应用
指的是在没有网络状态可以运行的应用。
manifest文件是核心，记录着哪些资源文件需要离线缓存，要使用manifest，只需要在html标签中添加属性
<html manifest="cache,manifest">
- 表单新增功能
（1）以往的input的name和value要随着form表单一起提交，form表单必须包裹input，而现在可以通过input的form属性绑定
（2）placeholder属性，提示信息
（3）autofocus属性，自动聚焦，页面只能有一个
还有type为email、number等，但是实际项目中一般使用自定义 - CSS3
CSS3提供了更多的选择器，before、after、first-child、nth-child。提供的效果包括box-shadow、text-shadow、background-size；在具体语法不同浏览器有所区别:
background-size: 10px 5px;
// 考虑兼容性
-webkit-background-size: 10px 5px;
还可以使用media-query实现响应式布局
@media (max-width: 1190px) {
、、、
}
- 地理定位
Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问，这个对象有三个方法:
getCurrentPosition()
watchPosition()
clearWatch()
页面第一次使用这个api是需要获得用户许可，watchPosition可以对位置变化事件进行监听。
7. 音频、视频
音频(audio)/视频(video) 方法
addTextTrack() //向音频、视频添加新的文本轨道
canPlayType() //检测浏览器是否能播放指定的音频、视频类型
load() //重新加载音视频元素
play() //开始播放音视频
pause() 暂停当前播放的音视频
音频(audio)/视频(video) 属性
audioTracks // 返回表示可用音频轨道的Audio TrackList对象
autoplay // 设置或返回是否在加载完成后随即播放音频/视频
buffered // 返回表示音频/视频已缓冲部分的TimeRanges对象
controller // 返回表示音频、视频当前媒体控制器的MediaController对象
controls // 设置或返回音视频是否显示控件（比如暂停/播放等）
crossOrigin // 设置或返回音视频的CORS设置
currentSrc // 返回当前音视频的URL
currentTime // 返回音视频中的当前播放位置（以秒计）
defaultMuted // 设置或返回音视频是否静音
defaultPlaybackRate // 设置或返回音视频的默认播放速度
duration // 返回当前音视频的长度（以秒计）
ended // 返回表示音视频的播放是否已结束
error // 设置或返回音视频错误状态的MediaError对象
loop // 设置或返回音视频是否应在结束时重新播放
mediaGroup // 设置或返回音视频所属的组合（用于连接多个音视频元素）
muted // 设置或返回音视频是否静音
networkState // 返回音视频的当前网络状态
paused // 设置或返回音视频是否暂停
playbackRate // 设置或返回音视频播放的速度
played // 返回表示音视频已播放部分的TimeRanges对象
preload // 设置或返回音视频是否应该在页面加载后进行加载
readyState // 返回音视频当前的就绪状态
seekable // 返回表示音视频可寻址部分的 TimeRanges 对象
seeking // 返回用户是否正在音视频中进行查找
src // 设置或返回音视频元素的当前来源
startDate // 返回表示当前时间偏移的Date对象
textTracks // 返回表示可用文本轨道的TextTrackList对象
videoTracks // 返回表示可用视频轨道的Video TrackList对象
volume // 设置或返回音视频的音量
音频(audio)/视频(video) 事件
abort // 当音视频的加载已放弃时触发
canplay // 当浏览器可以开始播放音视频时触发
canplaythrough // 当浏览器可在不因缓冲而停顿的情况下进行播放时触发
durationchange // 当音视频的时长已更改时触发
emptied // 当目前的播放列表为空时触发
ended // 当目前的播放列表已结束时触发
error // 当在音视频加载期间发生错误时触发
loadeddata // 当浏览器已加载音视频的当前帧时触发
loadedmetadata // 当浏览器已加载音视频的元数据时触发
loadstart // 当浏览器开始查找音视频时触发
pause // 当音视频已暂停时触发
play // 当音视频已开始或不在暂停时触发
playing // 当音视频在因缓冲而暂停或停止后已就绪时触发
progress // 当浏览器正在下载音视频时触发
ratechange // 当音视频的播放速度已更改时触发
seeked // 当用户已移动/跳跃到音视频中的新位置时触发
seeking // 当用户开始移动/跳跃到音视频的新位置时触发
stalled // 当浏览器尝试获取媒体数据，但数据不可用时触发
suspend // 当浏览器刻意不获取媒体数据时触发
timeupdate // 当目前的播放位置已更改时触发
volumechange // 当音量已更改时触发
waiting // 当视频由于需要缓冲下一帧而停止时触发
- canvas
canvas标签用于绘制图像（通过脚本，通常是JavaScript，它本身并没有绘制能力，仅仅是图形的容器）
getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性
各属性列表 - 新事件
| 事件 | 描述 |
|---|---|
| onresize | 当调整窗口大小时运行脚本 |
| ondrag | 当拖动元素时运行脚本 |
| onscroll | 当滚动元素的滚动条运行时运行脚本 |
| onmousewheel | 当转动鼠标滚轮时运行脚本 |
| onerror | 当错误发生时运行脚本 |
| onplay | 当媒介数据将要开始播放时运行脚本 |
| onpause | 当媒介数据暂停时运行脚本 |
- Websocket
全双向通信协议，是建立在TCP之上的，跟socket一样。
该通信协议建立在http协议的基础之上，因此连接的发起仍然是客户端，在http连接建立之后，再将协议升级为webSocket，在webSocket连接建立之后，客户端和服务器端都可以主动向对方发送报文信息。
连接过程–握手过程：
- 浏览器、服务器建立TCP连接，三次握手。这是通信的基础，传输控制层，若失败后续都不执行
- TCP连接成功后，浏览器通过HTTP协议向服务器传送WebSocket支持的版本号等信息。（开始的HTTP握手）
- 服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据
- 当收到了连接成功的消息后，通过TCP通道进行传输通信
WebSocket与HTTP的关系：
相同点： - 都是一样基于TCP的，都是可靠传输协议
- 都是应用层协议
不同点： - WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息，HTTP是单向的。
- WebSocket是需要握手进行建立连接的
WebSocket在建立握手时，数据是通过HTTP传输的，但是建立之后，在真正传输时是不需要HTTP协议的。
WebSocket与Socket的关系
Socket其实并不是一个协议，而是为了方便使用TCP或UDP而抽象出来的一层，是位于应用层和传输控制层之间的一组接口。
- Socket是应用层与TCP/IP协议通信的中间软件抽象层，它是一组接口。在设计模式中，Socket其实就是一门面模式，它把复杂的TCP/IP协议隐藏在Socket接口后面，对用户来说，一组简单的接口就是全部，让Socket去组织数据，以符合指定的协议。
当两台主机通信时，必须通过Socket连接，Socket则利用TCP/IP协议建立连接。TCP连接更依靠与底层的IP协议，IP协议的连接则依赖于链路层等更低层次。
WebSocket则是一个典型的应用层协议。
区别：
Socket是传输控制层协议，WebSocket是应用层协议。
HTML5和WebSocket的关系
WebSocket API是HTML5标准的一部分，但这并不代表WebSocket一定要用在HTML中，或者只能基于浏览器的应用程序中使用。
- 拖拽
指鼠标点击对象之后，不松手将其拖拽到目标对象，或半途松手（释放）的过程
拖拽 Drag
源对象：指定的鼠标点击的一个事物，例如，一个元素，一个图片等
目标对象：指定是我们拖动源对象后，预计要进入的区域
- 被拖动的源对象可以触发的方法
（1）ondragstart：源对象开始被拖动
（2）ondrag：被拖动过程中
（3）ondragend：源对象被拖动结束 - 源对象进入目标对象可以触发的事件
（1）ondragenter：源对象进入目标对象时触发
（2）ondragover：源对象悬停在目标对象上方时触发
（3）ondragleave：源对象被拖动着离开目标对象时触发
（4）ondrop：源对象在目标对象上松手时触发 - 拖拽属性 一共就是这七个方法
功能：用于在源对象和目标对象之间传递数据
（1）setData():设置数据，参数是key和value（value必须是字符串）
（2）getData():获取数据，参数是key，通过key获取对应的value值 - dataTransfer注意：
dataTransfer的传输数据必须为字符串类型，所以需要转化数据类型，那么就要使用到JSON方法
// 使用JSON对象中的方法 转换 字符串和对象的数据类型
var str = new String();
var obj = {};
// JSON.stringify(对象)：可以将对象类型 转换为字符串类型
console.log(typeof JSON.stringify(obj));
//JSON.parse(字符串)：可以将字符串类型 转换为对象类型
console.log(typeof JSON.parse(str));
注意：
标签中自带的属性：draggable释放可以拖拽，默认为false
// 切记开启draggable属性
<div class="box" draggable="true"></div>
var box = document,getElementByClassName('box')[0];
// 定义全局变量，存储鼠标的位置
var offsetX;
var offsetY;
// 开始拖动时
box.ondragstart = function(ev) {
// 获取鼠标在元素上的位置
offsetX = ev.offsetX;
offsetY = ev.offsetY;
}
// 源对象被拖动时
box.ondrag = function(ev) {
var x = ev.clientX;
var y = ev.clientY;
// drag事件最后一刻，无法读取鼠标的坐标，x和y都会变成0
if (x == 0 || y == 0) {
return false; // 直接结束，不赋值给元素
}
x -= offsetX;
y -= offsetY;
this.style.left = x + 'px';
this.style.top = y + 'px';
}
// 拖动结束时
box.ondragend = function() {
console.log(1);
}
ES6
- let const
let表示申明变量，const表示申明常量
- 常量定义了就不能改了，对象除外，因为对象指向的地址没变。
- const在申明是必须被赋值的
- 两者都是块级作用域
块级作用域与函数作用域，块级作用域：任何一对花括号{}中的语句都属于一个块，在这之中定义的所有变量在代码块外都是不可见的；函数作用域：定义在函数中的参数和变量在函数外部都是不可见的。
- 模块字符串
可以用反引号``来进行字符串拼接，${}存放变量 - 解构
可以使用{}对象，[]对数组进行解构
// 创建数组
const arr1 = ['香蕉', '皮球', '西瓜'];
//数组解构
const [a, b, c] = arr1;
// 创建对象
const arr2 = {
name: 'BlueBones',
age: 80,
color: 'blue'
}
// 解构对象
const {name, age, color} = arr2;
- 函数的参数默认值
函数传参可以有默认值
function Text(text = 'hello') {
console.log(text);
}
- Sprend / Rest 操作符 …
指的是 … ，具体是Spread还是Rest需要看具体代码
当被用于==迭代器（Iterator）==是按照一定的顺序对一个或多个容器中的元素进行遍历的一种机制
function Iterator(x, y, z) {
console.log(x, y, z);
}
let arr = [1, 2, 3];
Iterator(...arr); // 1 2 3
当被用于函数传参时，是一个Rest操作符
function Func(...args) {
console.log(args);
}
Func( 1, 2, 3, 4, 5 ); // [1, 2, 3, 4, 5]
- 箭头函数
- 不需要function关键字来创建函数
- 省略return关键字
- this始终指向函数申明时所在作用域下的this值
// es5
var fun = function () {}
//es6
var fn = () => {}
- for of / for in
for of 遍历的是键值队中的值
for in 遍历的是键值队中的键 - class类
ES5中是支持class语法的，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式
class Student {
constructor() { // 指向构造函数
console.log("I'm a student");
console.log(this.constructor.anotherRead()); // 调用成功，最后看这里
}
study() {
console.log('Study！');
}
// 类是通过static关键字定义静态方法，不能在类的实列上调用静态方法，而应该通过类本身调用。通常是实用程序方法，例如创建或克隆对象的功能
static read() {
console.log('Reading!');
}
// 在一个静态方法中调用同一个类的其他静态方法，可以使用 this 关键字
// 非静态方法中，不能直接使用this关键字来访问静态方法，而是要用类名来调用CLASSNAME.STATIC_METHOD_NAME(),或者用构造函数的属性来调用该方法：this.constructor.STATIC_METHOD_NAME()
static anotherRead() {
return this.read() + '123走起!';
}
}
console.log(typeof Student); // function
let stu = new Student(); // 实例化，"I'm a student"
stu.study(); // study!
stu.read(); // 报错
stu.anotherRead();
静态方法不能被实例继承，但可以被子类继承
class Foo {
static ClassMethod() {
return 'hello';
}
}
Foo.ClassMethod(); // ''hello
// static方法不能被实例继承
var foo = new Foo();
foo.ClassMethod(); // 报错
// static方法可以被子类继承
class Son extends Foo {}
Son.ClassMethod();
- 导入/导出
ES6模块尽量的静态化，使得编译时就能确定依赖关系
- export 导出：用于规定模块的对外接口；也可以实现访问外部文件中的变量；可以用as来重命名导出的变量
- import 导入：用于输入其他模块提供的功能
import关键点
（1）import导入的值都是只读的，不允许修改输入的接口。
（2）可以修改导入的对象，可以修改导入对象的属性，不推荐这样做，建议把导入的变量（不管是普通变量还是对象）都只当做只读的。
（3）import … from 中from后面的路径可以是绝对路径也可以是i相对路径。
（4）js模块导入时可以省略后面的.js后缀
（5）import命名具有提升效果，会把import命令提升到模块的头部，首先执行。
（6）执行同一个import命令多次，默认只会执行一次，不会执行多次。
（7）从同一个模块通过多条import加载不同变量，但它们对应的是同一个模块的实例。import语句是 单例模式（Singleton）
（8）不推荐import和require在同一个模块使用，因为他们的执行时期不一样，导致的结果可能就不一样。目前在模块中使用require还需要Babel转换比较麻烦
（9）整体加载模块：
import * as user from './url';
// 导出url模块的所有值命名为user（一个对象）
export default默认输出
使用export default导出的值，import导入可以为这个导出自定义名称。
（1）export default只能使用一次，export可以使用多次
（2）后面不能跟变量声明语句
export default var a = 10; // 写法错误
（3）export default a的含义就是将变量a赋值给变量default，所以上面那种写法是错误的
（4）export导出一定要指定对外接口，而export default不需要
（5）export和export default能一起使用
export和import复合写法
// 这种写法相当于转发了这两个接口，没有实际导入当前模块，当前模块不能直接使用这两个变量
export {name, age} from 'a.js';
// 可以写成两句，实际导入当前模块
import { name, age } from 'a.js';
export { name, age };
- promise
此处内容较多，请移步至此 Promise一步到位 - async / await
能更好解决回调地狱
async函数
函数返回值为promise对象；promise对象的结果由async函数执行的返回值决定。
跟promise.then返回的结果规则是一样的
async function main() {
//1.如果返回值是一个非promise类型的值
// return 521; // promise状态就是成功fulfilled，返回值由return后面决定
//2.如果返回的是一个promise对象
// return new Promise( (resolve, reject) => {
// resolve('OK'); 返回就是一个成功的状态，返回值由resolve的参数决定
// reject('Error'); 返回值就是失败的状态，返回值也同样
// } )
//3. 抛出异常
// throw "No"; //状态失败，结果就是抛出的值
};
let res = main();
console.log(res); // Promise
// Promise返回的状态由函数内部的返回值决定的
await函数
await右侧的表达式一般为promise对象，但也可以是其它的值。如果表达式是promise对象，await返回的是promise成功的值；如果表达式是其他值，直接将此值作为await的返回值。
使用注意:await必须写在async函数中，但async函数中可以没有await；如果await的promise失败了，就会抛出异常，需要通过try…catch捕获处理。
async function main() {
let p = new Promise( (resolve, reject) => {
// resolve('OK');
reject('Error');
} );
//1.右侧为promise的情况
// let res1 = await p;
// console.log(res1); //OK 返回resolve中的值（较常见）
//2.右侧为其他类型的值
// let res2 = await 123;
// console.log(res2); //123 返回的是await的值
//3.如果promise是失败的一种状态
// let res3 = await p; //会抛出错误
// 利用try...catch捕获错误
try {
let res3 = await p;
}catch(e) {
console.log(e); //拿到失败的结果
}
}
main();
- Set集合
集合是由一组无序但彼此之间又有一定关系性的成员构成，每个成员在集合中只能出现一次（怪不得数组去重的方法里有这个），不同于字典、链表之类的，它是一种包含了不同元素的数据结构。
let s = new Set();
[2, 3, 5, 4, 3, 2].forEach( x => s.add(x) );
console.log(s); // (2, 3, 4, 5)
let a = new Set([1, 2, 3]);
let b = new Set([3, 5, 2]);
// 并集
let UnionSet = new Set([...a, ...b]);
console.log(UnionSet); // Set(4) {1, 2, 3, 5}
// 交集
let IntersectionSet = new Set([...a].filter(x => b.has(x)));
console.log(IntersectionSet); // Set(2) {2, 3}
// 补集
let let diffSet = new Set([...a].filter(x => !b.has(x)));
console.log(diffSet); // Set(1) {1}
// 用 diffSet instanceof Object ,返回的true，而Array返回的是False，说明此处不是数组，而是对象
- Symbol
新的基本类型，表示第一无二的值，最大的用法是用来定义对象的唯一属性名。
Symbol是原始数据类型，不是对象，不能使用new命令。可以接受一个字符串作为参数，为新创建的Symbol提供描述，用来显示在控制台或者作为字符串的时候使用。
可以保证属性名不重名
let sy = Symbol('KK');
console.log(sy); // Symbol(KK)
typeof(sy); // "symbol"
// 相同参数 Symbol() 返回的值不相等
let sy1 = Symbol('KK');
sy === sy1; // false
注意点
Symbol值作为属性名时，该属性是共有属性不是私有属性，可以在类的外部访问，但是不会出现在for…in、for…of的循环中，也不会被Object.keys()、Object.getOwnPropertyNames()返回。
如果要读取Symbol属性，可以通过Object.getOwnPropertySymbols()和Reflect.ownKeys()取到。
** Symbol.for()*
类似单例模式，首先会在全局搜索被登记的Symbol中是否有该字符串参数作为名称的Symbol值，如果有，即返回该Symbol值，若没有则新建并返回一个以该字符串参数为名称的Symbol值，并登记在全局环境中供搜索。
let yellow = Symbol('Yellow');
let yellow1 = Symbol.for('Yellow');
yellow === yellow1; //false
let yellow2 = Symbol.for('Yellow');
yellow1 === yellow2; //true
Symbol.keyFor()
返回一个已登记的Symbol类型值的key，用来检测该字符串参数作为名称的Symbol值是否已被登记。
let yellow = Symbol.for('Yellow');
Symbol.keyFor(yellow1); // 'Yellow'
子集，判断a是不是b的子集：
（1）假如a和b的并集没有产生新的元素，即
// unionSet.size == a.size || unionSet.size == b.size;
// 假设判断a是不是b的子集
if (unionSet.size == b.size) {
console.log('a是b的子集');
}
// 用这个方法或许更快捷点，万一遍历的数组很长呢。。。
（2）遍历所有的a集合，判断b集合里面是否有a的所有成员，如果有，那么说明a是b的子集
let flag = false;
for(let item of b.value()) {
if (a.has(item)) {
flag = true;
}
}
if (flag) {
console.log('a是b的子集');
}else {
console.log('a不是b的子集');
}
set的属性和方法
Set.prototype.constructor: 构造函数，默认是Set函数
Set.prototype.size: 返回Set实例的成员总数
Set实例的方法
add(value): 添加某个值，返回Set结构本身；
delete(value): 删除某个值，返回一个布尔值，表示删除是否成功；
has(value): 返回一个布尔值，表示该值是否为Set的成员；
clear(value): 清除所有成员，没有返回值
Set遍历的方法
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
clear()：使用回调函数的遍历每个成员
CSS3新特性
- 选择器
:last-child // 选择元素最后一个孩子
:first-child // 选择元素第一个孩子
:nth-child(1) // 按照第几个孩子给它设置样式
:nth-child(even) // 按照偶数
:nth-child(odd) // 按照奇数
:disabled // 选择每个禁用的E元素
:checked // 选择每个被选中的E元素
:not(selector) // 选择非selector元素的每个元素
::selection // 选择被用户选取的元素部分
伪类和伪元素：
根本区别在于它们是否创造了新的元素（抽象）
- 伪类：用于向某些选择器添加特殊的效果（没有创建新元素）
:last-child // 选择元素最后一个孩子
:first-child // 选择元素第一个孩子
:nth-child(1) // 按照第几个孩子给它设置样式
a:link {color: #FF0000} // 未访问的链接
a:hover {color: #00FF00} // 鼠标移动到链接上
a:active {color: #0000FF} // 选定的链接
- 伪元素：创建html中不存在的元素，用于将特殊的效果添加到某些选择器
::before {} // 选择器在被选元素的前面插入内容和定义css，使用content属性来指定要插入的内容
::after {} // 选择器在被选元素的后面插入内容和定义css，使用content属性来指定要插入的内容
:first-letter // 选择该元素内容的首字母
:first-line // 选择该元素内容的首行
::selection // 选择被用户选取的元素部分
- 背景和边框
- 背景
background-size: // 规定背景图片的尺寸（cover:填充; 100% 100%: 拉伸）
background-origin: // 规定背景图片的定位区域
// 对于background-origin属性，有如下属性
// 背景图片可以放置于content-box、padding-box或border-box区域
- 边框
border-radius: 圆角
box-shadow / text-shadow: 阴影
border-image: 边框图片
- 文本效果
| 事件 | 描述 |
|:--------😐 -----------😐
|text-shadow|向文本添加阴影|
|text-justify|规定当text-align设置为"justify"时所使用的对齐方法|
|text-emphasis|向元素的文本应用重点标记以及重点标记的前景色|
|text-outline|规定当文本溢出包含元素时发生的事情|
|text-wrap|规定文本的换行规则|
|word-break|规定非中韩文本的换行规则|
|word-wrap|允许对长的不可分割的单词进行分割并换行到下一行|
|text-decoration|文本修饰符: overline、line-through、underline分别是上划线、中划线、下划线|
- @font-face 自定义字体
- 渐变,CSS3新增了渐变效果，包括liner-gradient（线性渐变）和radial-gradient（径向渐变）
- 2D/3D转换
-
2D转换（transform）
(1)translate(): 元素从其当前位置移动，根据给定的left(x坐标)和top(y坐标)位置参数。transform: translate(50px, 100px);
(2)rotate(): 元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg);
(3)scale(): 元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）参数，也可以一个值（宽高)。transform: scale(2, 4);
(4)skew(): 元素翻转给定的角度，根据给定的水平线（X轴）和垂直线（Y轴）参数。transform: skew(30deg, 20deg);
(5)matrix(): 把所有2D转换方法组合在一起，需要六个参数，包含数字函数，允许您：旋转、缩放、移动以及倾斜元素。transfor:matrix(0.866, 0.5, -0.5, 0.866, 0, 0); -
3D转换
(1)rotateX(): 元素围绕其X轴以给定的度数进行旋转。transform: rotate(120deg);
(2)rotateY(): 元素围绕其Y轴以给定的度数进行旋转。transform: rotateY(130deg);
(3)perspective: 规定3D元素的透视效果。
- 动画、过渡
- 过渡效果（transition），使页面变化更平滑，以下参数可直接写在transition后面
(1)transition-property:执行动画对应的属性，例如color,background等,可以使用all来指定所有的属性。
(2)transition-duration: 过渡动画的一个持续时间。
(3)transition-timing-function: 在延续时间段，动画变化的速率，常见的有: ease 中间快，两头慢 | linear 匀速 | ease-in 相对于匀速，开始的时候慢，之后快 | ease-out 相当于匀速，开始时快，结束时慢 | ease-in-out 开始和结束都慢 | cubic-bezier 在此函数中自定义值，可能是0至1之间的值；
(4)transition-delay: 延迟多久后开始动画 - 动画（animation）
先定义@keyframes规则(0%, 100% | from, to)
然后定义animation，一下参数可直接写在animation后面
(1)animation-name: 定义动画名称
(2)animation-duration: 指定元素播放动画所持续的时间长
(3)animation-timing-function: ease | liner | ease-in | ease-in-out | cubic-bezier(…); 指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式
(4)animation-delay: 指定元素动画开始时间
(5)animation-iteration-count: infinite | number; 指定元素播放动画的循环次数
(6)animation-direction: normal | altermate; 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是altermate，规定动画在下一周期逆向地播放（来去播放）
(7)animation-play-state: running | paused; 控制元素动画的播放状态
- 多列布局
通过CSS3，能够创建多个列来对文本进行布局
(1)column-count: 规定元素应该被分隔的列数
(2)column-gap: 规定列之间的间隔
(3)column-rule: 设置列之间的宽度、样式和颜色规则 - 用户界面
CSS3中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等
(1)resize
规定是否可由用户调整元素尺寸。若希望此属性生效，需要设置元素的overflow属性，值可以是auto、hidden或scroll
div {
resize: both; // none|both|horizontal|vertical
overflow: auto;
}
(2)box-sizing
可设置的值有content-box、border-box和inherit
- content-box
是W3C的标准盒模型，元素宽度=内容宽度+padding+border
实际上的width大于原始设定的width - border-box
ie的怪异盒模型，元素宽度=设定的宽度，已经将padding和border包括进去了，比如有时候在元素基础上添加内距padding或border会将布局撑破，但是border-box就可以轻松完成 - inherit
规定从父元素继承box-sizing属性的值
(3)outline-offset
属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
CSS兼容内核
-moz: 代表FireFox浏览器私有属性
-ms: 代表IE浏览器私有属性
-webkit: 代表safari、chrome浏览器私有属性
-o: 代表opera浏览器私有属性
4115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
