原型：Javascript对象都有一个叫做原型的公共属性，属性名是_proto_。这个原型属性是对另一个对象的引用，通过这个原型属性我们就可以访问另一个对象所有的属性和方法。
每个实例对象（ object ）都有一个私有属性（称之为 proto ）指向它的构造函数的原型对象（prototype ）。该原型对象也有一个自己的原型对象( proto ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。
原型链：JavaScript中的对象都有一个特殊的 prototype 内置属性，其实就是对其他对象的引用。几乎所有的对象在创建时 prototype 属性都会被赋予一个非空的值，我们可以把这个属性当作一个备用的仓库。当试图引用对象的属性时会触发get操作，第一步时检查对象本身是否有这个属性，如果有就使用它，没有就去原型中查找。一层层向上直到Object.prototype顶层，向上查找的过程就是原型链。
ransform是变形,改变的意思。在CSS3中transform主要包括以下几种：旋转rotate，扭曲skew,缩放scale和移动translate以及矩阵变形matrix。transform的作用也是改变，让元素倾斜，旋转，缩放，位移。
transform: rotate | scale | skew | translate |matrix;
value(值)为旋转度数（deg），默认顺时针旋转。value若为负值则逆时针旋转。
使用如下：
.box{
width:100px;height:100px;margin:20px auto;background-color:#75C934;
text-align:center;line-height:100px;font-size:18px;
/*过渡效果*/
-webkit-transition: transform 0.8s;
}
.box:hover{
/*旋转80°*/
transform:rotate(80deg);
}
value(值)为倾斜度数，value只有一个值，横向默认向左倾斜；有两个值，第二个值纵向默认向上倾斜。value若为负值则反方向倾斜。
使用如下：
.box{
width:100px;height:100px;margin:20px auto;background-color:#75C934;
text-align:center;line-height:100px;font-size:18px;
-webkit-transition: transform 0.8s,border-radius 0.8s;
border-radius:30px;
}
.box:hover{
transform:skew(20deg,20deg);
border-radius:0px;
}
value(值)为缩放倍数。value只有一个值，默认整体缩放；有两个值，第一个值横向缩放，第二个值纵向缩放。value值大于1放大，小于1大于0缩小，负值则反向缩放(元素呈镜像)
使用如下：
.box{
-webkit-transition: transform 0.8s,border-radius 0.8s;
}
.box:hover{
transform:scale(2,0.8);
border-radius:40px;
}
value(值)为位移像素，value只有一个值，横向默认向右移动；有两个值，第二个值纵向默认向下移动。value若为负值则反方向移动。
使用如下：
.box{
-webkit-transition: transform 0.3s,box-shadow 0.3s;
}
.box:hover{
transform:translate(-3px,-3px);
box-shadow:3px 3px 5px 0px #000;
}
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。其对应的类型如下:
1、color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-color,border-color,color,outline-color等css属性；
2、length: 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性；
3、percentage:真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性；
4、integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生 如：outline-offset,z-index等属性；
5、number真实的（浮点型）数值，如：zoom,opacity,font-weight,等属性；
6、transform list:详情请参阅：《CSS3 Transform》
7、rectangle:通过x, y, width 和 height（转为数值）变换，如：crop
8、visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility
9、shadow: 作用于color, x, y 和 blur（模糊）属性,如：text-shadow
10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画,如：background-image
11、paint server (SVG): 只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似
12、space-separated list of above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化
13、a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化
transition-duration是用来指定元素 转换过程的持续时间，取值：
transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
transition-delay延迟开始过渡的时间，默认值是0，表示不延迟，立即开始过渡动作。单位是s秒或ms毫秒。
常见的就是伪类触发:hover，:focus，:active，:checked等。还有例如@media媒体查询，根据设备大小，横屏竖屏切换时触发。还有如click，keydown等JS事件触发。页面加载也能触发就不一一列举了。总之过渡的本质是在时间段内平滑过渡属性值，与怎么触发没有关系。
Less 是一门 CSS 预处理语言，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
Less 可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
变量:
变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
less源码:
@color:#999;
#header{
color:@color;
}
h2{
color:@color
}
编译后的css :
#header {
color: #999;
}
h2 {
color: #999;
}
混合（Mixins）
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
LESS源码：
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
编译后的CSS：
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
嵌套
我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
LESS源码：
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover {
border-width: 1px
}
}
}
}
编译后的CSS：
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
函数和运算
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。
LESS源码：
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}
编译后的CSS：
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
less的使用是很容易的，首先，使用你最常使用的代码编辑器，按LESSCSS的语法规则写好.less文件，接下来，使用编译工具它编译成.css，最后再引入页面即可。
GUI编译工具
为方便起见，建议初学者使用GUI编译工具来编译.less文件，以下是一些可选GUI编译工具：
koala(Win/Mac/Linux)
国人开发的LESSCSS/SASS编译工具。下载地址：http://koala-app.com/index-zh.html
Codekit(Mac)
一款自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具，含语法检查、图片优化、自动刷新等附加功能。下载地址http://incident57.com/codekit/
WinLess(Win)
一款LESS编译软件。下载地址http://winless.org/
SimpleLess(Win/Mac/Linux)
一款LESS编译软件。下载地址http://wearekiss.com/simpless
Node.js库
LESSCSS官方有一款基于Node.js的库，用于编译.less文件。
使用时，首先全局安装less（部分系统下可能需要在前面加上sudo切换为超级管理员权限）：
npm install -g less
接下来就可以使用lessc来编译.less文件了：
lessc example/example.less example/example.css
更多选项可以直接运行lessc查看说明。
浏览器端使用
LESSCSS也可以不经编译，直接在浏览器端使用。
使用方法：
下载LESSCSS的.js文件，例如lesscss-1.4.0.min.js。在页面中引入.less文件
<link rel="stylesheet/less" href="example.less" />
需要注意rel属性的值是stylesheet/less，而不stylesheet。
引入第1步下载的.js文件
<script src="lesscss-1.4.0.min.js"></script>
需要特别注意的是，由于浏览器端使用时是使用ajax来拉取.less文件，因此直接在本机文件系统打开（即地址是file://开头）或者是有跨域的情况下会拉取不到.less文件，导致样式无法生效。
还有一种情况容易导致样式无法生效，就是部分服务器（以IIS居多）会对未知后缀的文件返回404，导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css（具体方法请搜索）。或者还有一种更简单的方法，即是直接将.less文件改名为.css文件即可。
建议使用GUI编译工具来编译.scss文件，国人开发的LESSCSS/SASS编译工具。下载地址：http://koala-app.com/index-zh.html
先在windows上安装Ruby，然后在WebStorm中配置sass。安装步骤见：http://www.jianshu.com/p/537cea1dc3f8
1.变量
sass允许使用变量，所有变量以$开头。
$blue :#1875e7;
div {
color:$blue;
}
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
2.计算功能
sass允许在代码中使用算式:
body{
margin:(14px/2);
top:50px+100px;
right:$var * 10%;
}
3.嵌套
sass允许选择器嵌套。比如，下面的css代码：
div h1{
color:red;
}
可以写成：
div{
h1{
color:red;
}
}
属性也可以嵌套，比如border-color属性，可以写成：
p {
border: {
color: red;
}
}
注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
a {
&:hover { color: #ffb3ff; }
}
4.注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!
重要注释！
*/
1.继承
sass允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;
}
class2要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
2.Mixin
Mixin有点像C语言的宏，是可以重用的代码块。
使用@mixin命令，定义一个代码块。
@mixin left {
float:left;
margin-left:10px;
}
使用@include命令，调用这个mixin。
div{
@include left;
}
mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候，根据需要加入参数：
div {
@include left(20px);
}
下面是一个mixin的实例，用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的时候，可以像下面这样调用：
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
3.颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4.导入文件
@import命令，用来插入外部文件。编译时会将@import的.scss文件合并进来只生成一个CSS文件。
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。导入的.css文件不会合并到编译后的文件中。
@import "foo.css";
1.条件语句
@if可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
2.循环语句
sass支持for循环：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令，作用与for类似：
@each $member in a, b, c, d {
.#{$member} {
background-image:url("/image/#{$member}.jpg");
}
}
3.自定义函数
sass允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
1.初始化项目
首先新建一个vue-webpack文件夹，在该文件夹路径下进行初始化项目。初始化项目后将自动生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等。）命令如下：
npm init -y
2.安装各种依赖项
a: 安装vue2.3.4
npm install --save vue
b: 安装最新版本的webpack以及webpack测试服务器
npm install --save-dev webpack webpack-dev-server
c: 安装babel，一般的浏览器是不认识es6语法的，babel的作用是将es6的语法编译成浏览器认识的语法
npm install --save-dev babel-core babel-loader babel-preset-es2015
d: 安装vue-loader用来解析vue的组件，.vue后缀的文件。
npm install --save-dev vue-loader vue-template-compiler
e: 安装css-loader file-loader解析CSS.
npm install --save-dev css-loader file-loader
3. 编写页面
在vue-webpack文件夹新建目录src，src目录下新建App.vue文件，代码如下：
<template>
<div id="example">
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello World !'
}
}
}
</script>
<style scoped>
#example {
background:#000000;
color:#fff;
height: 100vh;
}
</style>
在src文件夹里新建main.js文件夹，代码如下：
/* 引入vue和主页 */
import Vue from 'vue'
import App from './App.vue'
/* 实例化一个vue */
new Vue({
el: '#app',
render: h => h(App)
})
配置webpack
在vue-webpack文件夹下新建webpack.config.js文件，代码如下：
/* 引入操作路径模块和webpack */
var path = require('path');
var webpack = require('webpack');
module.exports = {
/* 输入文件 */
entry: './src/main.js',
output: {
/* 输出目录，没有则新建 */
path: path.resolve(__dirname, './dist'),
/* 静态目录，可以直接从这里取文件 */
publicPath: '/dist/',
/* 文件名 */
filename: 'build.js'
},
module: {
rules: [
/* 用来解析vue后缀的文件 */
{
test: /\.vue$/,
loader: 'vue-loader'
},
/* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
{
test: /\.js$/,
loader: 'babel-loader',
/* 排除模块安装目录的文件 */
exclude: /node_modules/
}
]
}
}
打包项目
全局安装webpack
npm install -g webpack
用webpack命令进行打包项目
webpack
打包后在vue-webpack文件夹下会多出一个dist文件夹，查看里面会有build.js文件，里面的es6语法已经被转化了。
在根目录下新建index.html，引入build.js
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue-webpack</title>
</head>
<body>
<section id="app"></section>
<script src="./dist/build.js"></script>
</body>
</html>
项目目录结构
热重载
由于每修改一次都要重新打包，于是需要线上的热重载，全局安装webpack-dev-server：
npm install -g webpack-dev-server
使用webpack-dev-server命令运行：
webpack-dev-server
等待程序运行完毕，在浏览器输入http://localhost:8080/查看页面如下：
webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候在异步加载。通过loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
安装之前需要安装node.js，因为node.js自带了npm(软件包管理器)，使用npm安装webpack。
npm install webpack -g
a:新建一个demo文件夹
例如：demo文件夹的路径为 D:\Webpack Project\demo
b:在路径为D:\Webpack Project\demo下，使用 npm init 来创建一个package.json文件。这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等。
c:把webpack安装到当前的项目依赖中，在路径为D:\Webpack Project\demo下，使用 npm install webpack –save-dev 安装webpack
d:在demo文件夹下新建index.html
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
e:在demo文件夹下新建一个main.js文件
document.write('<h1>Hello World !</h1>');
f:在demo文件夹下新建一个webpack.config.js文件
module.exports = {
entry: './main.js', //唯一入口文件
output: {
filename: 'bundle.js' //打包后输出文件的文件名
}
};
把main.js文件打包为bundle.js文件。其中bundle.js文件是Webpack生成出来的。
g:打包，使用命令 webpack 来打包，然后使用浏览器打开index.html文件就能看到运行的结果了。
创建第二个 JS 文件
新建一个main2.js文件，代码如下所示：
document.write('<h1>Hello World</h1>');
然后修改mian.js文件，代码如下所示：
document.write(require("./main1.js"));
使用命令 webpack 来重新打包看到的结果是一样的。
loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
使用命令安装css-loader和style-loader
cnpm install css-loader style-loader
执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。
接下来创建一个style.css文件，代码如下：
body {
background: lightblue;
}
修改main.js文件
require("!style/!css!./style.css");
document.write(require("./main1.js"));
修改webpack.config.js文件
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}，
module:{
rules:[
{test:/\.css$/,loader:'style-loader!css-loader'}
]
}
};
重新使用 webpack 命令打包，结果和上面一样。
热重载
因为每次修改都需要重新打包浪费时间，所以需要线上的热重载。使用如下命令全局安装webpack-dev-server。
npm install -g webpack-dev-server
安装完成后使用如下命令运行：
webpack-dev-server
运行完毕，在浏览器中输入**http://localhost:8080/webpack-dev-server/**查看页面。
如果这时修改页面的的代码，不需要刷新浏览器就能自动更改。
合法域名校验错误如图：
注：合法域名校验错误原因是腾讯限制了请求服务器的地址，如果要使用wx.request(object)，里面的url必须在小程序后台配置。方法如下：
第一步:登陆小程序后台，点击“设置”，然后点击“开发设置”
第二步：填入合法域名，需要备案过。
flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活。
任何一个容器都可以指定为flex布局
.box1{
display: flex;
}
.box2{
display: inline-flex;
}
.box3{
display: -webkit-flex; /* Safari ,Webkit内核的浏览器，必须加上-webkit前缀。*/
display: flex;
}
注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
flex-direction属性决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-flow属性是flex-direction属性和flex-warp属性的简写形式，默认值为row nowarp。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content属性定义了项目在主轴上的对齐方式。
.box{
justify-content:flex-start | flex-end | center | space-between | space-around;
}
align-items属性定义项目在交叉轴上如何对齐s
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
JSON 类似 XML
相比 XML 的不同之处
为什么使用 JSON？
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
JSON 实例
通过我们的编辑器，您可以在线编辑 JavaScript 代码，然后通过点击一个按钮来查看结果：
<html>
<body>
<h2>在 JavaScript 中创建 JSON 对象</h2>
<p>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br />
</p>
<script type="text/javascript">
var JSONObject= {
"name":"Bill Gates",
"street":"Fifth Avenue New York 666",
"age":56,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
</script>
</body>
</html>
JSON 语法是 JavaScript 对象表示法语法的子集。
JSON 名称/值对
JSON 数据的书写格式是：名称/值对。
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：
"firstName" : "John"
这很容易理解，等价于这条 JavaScript 语句：
firstName = "John"
JSON 值
JSON 值可以是：
JSON 对像
{ "firstName":"John" , "lastName":"Doe" }
JSON 对象在花括号中书写，对象可以包含多个名称/值对，与这条 JavaScript 语句等价：
firstName = "John"
lastName = "Doe"
JSON 数组
JSON 数组在方括号中书写：
数组可包含多个对象：
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
在上面的例子中，对象 “employees” 是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录。
JSON 使用 JavaScript 语法
因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。
通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：
var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];
可以像这样访问 JavaScript 对象数组中的第一项：
employees[0].lastName;
返回的内容是：
Gates
可以像这样修改数据：
employees[0].lastName = "Jobs";
JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
由于 JSON 语法是 JavaScript 语法的子集，在旧版浏览器中，使用eval()对JSON数据结构求职存在危险，因为可能会执行一些恶意代码。
JSON对象有两个方法：stringify()和parse().在最简单的情况下，这两个方法分别用于把javascript对象序列化为JSON字符串和把JSON字符串解析为原生javascript值。
把javascript对象序列化为JSON字符串
<script type="text/javascript">
var book = {
title: "Professional JavaScript",
authors: [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011
};
var jsonText = JSON.stringify(book, ["title", "edition"]);
alert(jsonText);
</script>
把 JSON 字符串转换为 JavaScript 对象
<script type="text/javascript">
var book = {
"title": "Professional JavaScript",
"authors": [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011,
releaseDate: new Date(2011, 11, 1)
};
var jsonText = JSON.stringify(book);
alert(jsonText);
var bookCopy = JSON.parse(jsonText, function(key, value){
if (key == "releaseDate"){
return new Date(value);
} else {
return value;
}
});
alert(bookCopy.releaseDate.toISOString());