绘制环境

getContext('2d')

绘制方块

fillRect(L,T,W,H)默认颜色是黑色

strokeRect(L,T,W,H)带边框的方块

设置绘图

fillStyle填充颜色（绘制canvas是有顺序的）

lineWidth线宽度，是一个数值

strokeStyle边线颜色

边界绘制

lineJoin边界连接点样式(即四個角):miter（默认）、round（圆角）、bevel（斜角）

lineCap 端点样式:butt（默认）、round（圆角）、square（高度多出为宽一半的值）

绘制路径

beginPath 开始绘制路径

closePath 结束绘制路径

moveTo 移动到绘制的新目标点

lineTo 新的目标点

stroke 划线，默认黑色

fill 填充，默认黑色

rect 矩形区域

clearRect 删除一个画布的矩形区域

save 保存路径

restore 恢复路径

beginPath 开始绘制路径

querySelector 選擇首次遇到的
querySelectorAll 選擇所有
classList : add remove toggle

var div = document.getElementById('div1')
console.log(typeof div.classList); //object
// alert(div.classList)  //box1 box2 box3
div.classList.add('box4')
div.classList.remove('box2')
div.classList.toggle('box4') // 有則刪，無則加

---

eval(): 可以解析任何字符串變成js

parse: 只能解析JSON形式的字符串變成JS 安全性高些

字符串[json形式]轉 -- > JS ; JSON.parse(str)

json轉--> 字符串 ；JSON.stringify(json)

//str是一個fun
var str = 'function show(){ alert(123) }'
eval(str);     //字符串轉成原生js
show()     //之後即可調用*/

//str是一個json
var str = '{"name":"elmok"}'   //'{name:"elmok"}' 這咱不行，一定要加引號
var json = JSON.parse(str)   // json =  {"name":"hello"}
console.log(json.name);      //hello

//json變字符串
var json = {name:"hello"}    //json變成字符串 會自動加上雙引號
var str = JSON.stringify(json)
console.log(str);

問題：克隆一個json a{}，並且改變不影響原json
先把a{}轉為字符串'a{}'，存在str = 'a{}'裏，再把str轉為json,存在新建變量b = {}，則改變b不影響a

var a = {name: 'hello'}
var str = JSON.stringify(a)
var b = JSON.parse(str)
b.name = 'hi'
console.log(a.name);

兼容 https://github.com/douglascrockford/JSON-js

---

自定義屬性，想要取得某個值，可使用dataset對象

<div id="div1" data-mm="BB" data-mm-bb="BBBB">div</div>

    var div = document.getElementById('div1')
    alert(div.dataset.mm)
    alert(div.dataset.mmBb) //多個駝峰寫法

---

延遲加載JS
defer : 延迟加载，会按顺序执行，在onload执行前被触发
async : 异步加载，加载完就触发，有顺序问题

<script src="a.js" defer="defer"></script> <!--onload執行之前執行-->
<script src="a.js" async="async"></script> <!--圖片與js同時加載-->

---

元素拖動<>

首先，被拖動元素自身定義：draggable="true"

draggable ：

设置为true，元素就可以拖拽了

拖拽元素事件 : 事件对象为被拖拽元素

dragstart , 拖拽前触发
drag ,拖拽前、拖拽结束之间，连续触发
dragend , 拖拽结束触发

目标元素事件 : 事件对象为目标元素

dragenter , 进入目标元素触发，相当于mouseover
dragover ,进入目标、离开目标之间，连续触发
dragleave , 离开目标元素触发，相当于mouseout
drop , 在目标元素上释放鼠标触发

See the Pen JYYKeV by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

FF下必須設置dataTransfer对象才可能拖動（圖片以外）的元素

setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据，根据key值，获取对应的value
ev.dataTransfer.effectAllowed 設置光標樣式：copy link uninitialized..
ev.dataTransfer.setDragImage(img, 0, 0) 拖動的東西變為指定的對像，如一張圖片，0,0表示對象的座標XY

See the Pen bVVeyR by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

li[i].ondragstart = function (ev) { //g開始
  var ev = ev || event
  //   ev.dataTransfer.setData('name','hello') //ff bug
  ev.dataTransfer.setData('name', 'hello')
  ev.dataTransfer.effectAllowed = 'copy'; //光標樣式
  ev.dataTransfer.effectAllowed = 'link'; //光標樣式
  ev.dataTransfer.effectAllowed = 'uninitialized'; //光標樣式
  ev.dataTransfer.setDragImage(img, 0, 0) //拖的東西指定為div，即使變為div
}

小實例1：文件拖放上傳

See the Pen ojjYqE by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
小實例2：拖放購物車

See the Pen jbbVYO by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

header用在页面头部
nav导航
footer页面底部
hgroup标题给合
section版块，区块
article结构完整独立内容部分，可以呈现一个帖子或文章等
aside和主体相关的附属信息，一般用于与article相关的或侧边
address定义作者信息，联系方式
time定義時間
帶功能性：
datalist表示input里可能出现的值，即提示列表，input list = 'valList' --> datalist id= 'valList' 相對應

<input type="text" list="valList"/>
<datalist id="valList">
<!--表示input里可能出现的值，即提示列表 -->
    <option value="javascript">javascript</option>
    <option value="html5">html5</option>
    <option value="css3">css3</option>
</datalist>

<input type="text" list="valList" class='input-def'/>
<datalist id="valList">

<option value="javascript">javascript</option>
<option value="html5">html5</option>
<option value="css3">css3</option>

</datalist>
details用于描述文档或文档某个部分的细节；，该元素用于摘录引用等，应该与页面主要内容分开

下箭頭說明： open表示打開狀態
<details open>
    <summary>details元素的標題</summary>
    <p>details元素的內容</p>
</details>

<details>

<summary>details元素的標題</summary>
<span>details元素的內容</span>

</details>
dialog類似於對話

<dialog>
    <dt>what</dt>
    <dd>what毛</dd>
    <dt>how are your</dt>
    <dd>how 毛</dd>
</dialog>

<dialog>

<dt>what:</dt>
<dd>what毛</dd>
<dt>how are your</dt>
<dd>how 毛</dd>

</dialog>
mark标记，加默认黄色背景
<mark>

标记，加默认黄色背景

</mark>

<form action="http://baidu.com" method="get">
    用户：<input type="text" name = 'username'/>
    公钥：
    <keygen name="security" />
    <input type="submit" value=""/>
</form>

keygen name="security"公钥
<form action="http://baidu.com"; method="get">

用户：<input type="text" name = 'username'/>
公钥：
<keygen name="security" />
<input type="submit" value=""/>

</form>
progress進度條

<progress max="100" value="70">
    <span>80</span>%  <!--向下兼容-->
</progress>

<progress max="100" value="70">

<span>80</span>%  <!--向下兼容-->

</progress>

---

Input表單 type = ??

email 只允許輸入email類型

tel 移動端切換數字健盤

url 只允許輸入url類型

search input 刪除輸入按鈕

range

<input type="range" step="2" min="0" max="100" value="80"/>

<input type="range" name="" id="" step="2" min="0" max="100" value="80"/>

以下兼容性問題較大

color
datetime
datetime-local
time
date
week
month

---

新增屬性

placeholder placeholder = '請輸入四-六個字'

autocomplete autocomplete = 'off' 關閉自動提示

autofocus 打開顯示焦點

required 必須輸入內容

<input type="text" autofocus/>  與 input.focus();效果一致
<input type="text" required/>

pattern 正則驗證，有安全問題
formaction 臨時提交
formnovalidate 關閉驗證

<form action="http://badiu.com" >  <!--正常提交至baidu.com-->
    <input type="password" name="" id=""/>
    <input type="text" pattern="\d{1,5}"/> <!-- 正則 有安全隱患 -->
    <input type="submit" value="提交" />

    <input type="submit" value="臨時保存提交" formaction="http://163.com" formnovalidate/>  
    <!--臨時提交至163.com,所以需關閉驗證-->
</form>

---

兼容h5标签，在头部插入：

<script>
    document.createElement('elmok')
    document.createElement('header')
    document.createElement('article')
    document.createElement('aside')
    document.createElement('section')
    document.createElement('footer')
</script>

elmok,header.....{ display:block; }

當然，也可使用google小插件：http://html5shiv.googlecode.com/svn/trunk/html5.js

---

驗證表單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的验证反馈</title>
</head>
<body>
    <form>
        <input type="text" required id="text" pattern="\d{1,5}" maxlength="5">
        <input type="submit">
    </form>
    <script>
        var txt = document.getElementById('text');
        txt.addEventListener('invalid', fn, false);
        function fn(){
            // alert(this.validity);
            // alert('若輸入無效，即受input內限制條件，返回false： '+this.validity.valid)
            // alert(this.validity.valueMissing);
            // alert(this.validity.typeMismatch);
            // alert(this.validity.patternMismatch);
            // alert(this.validity.tooLong);
            ev.preventDefault();
        }

        觸發驗證條件時返回true,當下面所有都返回false時[即不觸發驗證條件通過]，valid返回true
       
         //valueMissing: 当输入值为空时，返回true
        //typeMismatch: 当输入类型和要求的类型不一致时，返回true
        //patternMismatch: 当输入内容和预期的正则是不匹配时，返回true
        //tooLong: 当输入内容的长度超出了maxlength的限制，返回true
    </script>
</body>
</html>

完整自定義驗證1：

<form action="">
    <input type="txt" id="text"/>
    <input type="submit" value="sub"/>
</form>
<script>
    var text = document.getElementById('txt')
    txt.oninput = function () {
        if(this.value == "講粗口"){
            this.setCustomValidity('請唔好講粗口!')
        }
        else{
            this.setCustomValidity('')   //非常重要！取消自定义
        }
    }
</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>自定义错误信息示例</title>
    <script type="text/javascript">
        var check = function() {
            var passwd1 = document.forms['testForm'].passwd1;
            var passwd2 = document.forms['testForm'].passwd2;
            if(passwd1.value != passwd2.value) {
                passwd2.setCustomValidity("密码不一致！");
                return false;
            } else {
                passwd2.setCustomValidity("");
            }
            var email = document.forms['testForm'].email1;
            if(!email1.checkValidity()) {
                email1.setCustomValidity("请输入正确的E-mail地址！");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<form id="testForm" name="testForm" onsubmit="return check();">
    <label for="pass1">密码:</label><input type="password" name="passwd1"/><br/>
    <label for="pass2">确认密码:</label><input type="password" name="passwd2"/><br/>
    <label for="email">E-mail:</label><input type="email" name="email1"/><br/>
    <button type="submit">提交</button>
</form>
</body>
</html>

---

明确一点：正常提交条件：

patternMismatch

valueMissing

rangeOverflow

rangeUnderflow

stepMismatch

tooLoog

typeMismatch

以上属性接口全部为false时，valid才返回true,表明可正常提交

只有当validity接口下的属性（customError除外）都为false并且validationMessage为空时才算验证通过。

查看属接口：console.dir(document.querySelector('input'))

See the Pen wKKMQx by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

从上面的截图可以看到validationMessage没清空，valueMissing、patternMismatch都已经验证通了。

document.getElementById('t2').querySelector('input').setCustomValidity('請輸入4位數字代碼')

//单纯这样写，即使写对条件，因为提示内容validationMessage未清空，也会导致验证不过; 
只有当validity接口下的属性（customError除外）都为false并且validationMessage为空时才算验证通过。

优化后：

<!DOCTYPE html>
<html>
<head>
    <mata charset="utf-8">
    <title>form test</title>
</head>

<body>
    <form name="test" action="." method="post">
        <input type="text" required pattern="^\d{4}$" oninput="out(this)" placeholder="请输入代码" >
        <button type="submit">Check</button>
    </form>
<script type="text/javascript">
function out(i){
    var v = i.validity;
    if(true === v.valueMessing){
        i.setCustomValidity("请填写些字段");
    }else{
        if(true === v.patternMismatch){
            i.setCustomValidity("请输入4位数字的代码");
        }else{
            i.setCustomValidity("");
        }
    }
}
</script>
</body>
</html>

感谢参考来源：http://tid.tenpay.com/?p=3592

类似于flash
只需指明两个状态，之间的过程由计算机自动计算
关键帧的时间单位
数字：0%、25%、100%等
字符：from(0%)、to(100%)

/*必要*/
animation-name        动画名称（关键帧名称）
animation-duration        动画持续时间

/*可選*/
animation-play-state 播放状态（ running 播放 和paused 暂停 ）
animation-timing-function    动画运动形式
animation-delay            动画延迟
animation-iteration-count        重复次数
infinite为无限次
animation-direction            播放前重置
alternate    动画直接从上一次停止的位置开始执行
normal    动画第二次直接跳到0%的状态开始执行

通过class
在class里加入animation的各种属性
直接给元素加-webkit-animation-xxx样式
animation的问题
没法动态改变目标点位置
obj.addEventListener('webkitAnimationEnd', function (){}, false);

最簡單例子：

AnimationEnd方法封裝：

    function addEnd(obj,fn){
        obj.addEventListener('webkitAnimationEnd',fn,false);
        obj.addEventListener('animationend',fn,false);
    }

See the Pen epNbew by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

注意：
1、@keyframes裏，當100%走完後，元素狀態恢復為未走之前，即<style></style>裏設置的狀態！
2、animation: 執行時間 | 動畫名稱 | 運動形式 | 正反序
3、通過將動畫加到class實現點擊會比直接寫好

css3 折紙效果
異常重要的佈局：

<input type="button" value="展开"/>
<div id="wrap">
    <h2>标题</h2>
    <div>
        <span>选项一</span>
        <div>
            <span>选项二</span>
            <div>
                <span>选项三</span>
                <div>
                    <span>选项四</span>
                    <div>
                        <span>选项五</span>
                        <div>
                            <span>选项六</span>
                            <div>
                                <span>选项七</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

要點：

#wrap{ perspective: 800px; } 

#wrap div{
    transform-style: preserve-3d;     /*每一個div都為一個3d轉換*/
    transform-origin: top;    /*top開始折紙*/
    transform: rotateX(-120deg);    /*初始化先隱藏不同，即折到看不見*/
}

#wrap h2{ z-index:100 } /*設置z-iindex 最高 ,避免被下面div遮蓋*/

var timer = null;
var i = 0
var on = true
inp.onclick = function () {
  inp.style.left = '-200px' //技巧点,點擊時先設置移動
  if (timer) {
    return;
  } //bug,只开不关，所以当不断点击时会出现重复关，如果timer正在执行，return，不往下执行；

  if (on) {
    i = 0; //開始時重置
    timer = setInterval(function () {
      div[i].className = 'show'
      i++;
      if (i == div.length) {
        clearInterval(timer)
        timer = null; //因使用timer作為判斷條件，结束时把定时器置null , 即false;
        inp.style.left = '0'   //執行後再回來
        inp.value = '关闭'
      }
    }, 150)
  } 
  else {
    i = div.length - 1; //開始時重置
    timer = setInterval(function () {
      div[i].className = 'close'
      i--;
      if (i < 0) {
        clearInterval(timer)
        timer = null; //因使用timer作為判斷條件
        inp.style.left = '0'
        inp.value = '展开'
      }
    }, 150)
  }
  on = !on
}

See the Pen YyXBKY by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

transform-style（preserve-3d） 建立3D空间
Perspective 景深
Perspective- origin 景深基点
Transform 新增函数
rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()

最簡單例子：

<div class="box">
    <div></div>
</div>

/*父級*/
.box{
    transform-style: preserve-3d;
    perspective: 800px;
}

/*元素本身*/
.box:hover div{ transform: rotateX(360deg); }
.box div{ transition: 2s; }

一個立方體：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

6個面，通過position:absolute;定位，每個transform轉換90deg到相應的面上,注意層次遮擋！

/*父元素定義*/
.box{
    transform-style:preserve-3d;
    perspective:1000px;
    perspective-origin:center;
}
.box div:nth-of-type(1) {
    top: -100px;
    transform-origin: bottom;
    transform: rotateX(90deg);
    z-index: 1
}
.box div:nth-of-type(2) {
    left: -100px;
    transform-origin: right;
    transform: rotateY(-90deg);
    z-index: 2
}
.box div:nth-of-type(3) {
    transform: translateZ(-100px);
    z-index: 3
}
.box div:nth-of-type(4) {
    left: 100px;
    transform-origin: left;
    transform: rotateY(90deg);
    z-index: 2
}
.box div:nth-of-type(5) {
    top: 100px;
    transform-origin: top;
    transform: rotateX(-90deg);
    z-index: 1
}

See the Pen PPqyZx by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

从哪个角度看： perspective-origin: right; 多远距离看 perspective: 800px;
从哪个角度看： perspective-origin: right; 必须先设置 perspective后，才有效，
perspective:800可单独设置有效果;

See the Pen YyXRgy by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

於是下面的例子可能是成立

創建動態style方法：

(function blue() {
  if (document.all) {
    window.style = '//some css code';
    document.createStyleSheet('javascript:style');
  } else {
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = '//some css code';
    document.getElementsByTagName('HEAD').item(0).appendChild(style);
  }
}) ()

See the Pen dYoQQy by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

延遲執行：

transition: 1s width,2s 3s height; /*3s表示延遲3s後執行*/

效果：

ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/

transition结束后执行，函数封装

function addEnd(obj, fn)
{
  obj.addEventListener('WebkitTransitionEnd', fn, false);
  obj.addEventListener('transitionend', fn, false);
}
function removeEnd(obj, fn)
{
  obj.removeEventListener('WebkitTransitionEnd', fn, false);
  obj.removeEventListener('transitionend', fn, false);
}

---

1、2D變換transform 旋轉 -- rotate

/*以XY軸中心點旋轉*/
.box:hover{-webkit-transform: rotate(360deg)}

/*以X軸中心點旋轉*/
.box:hover{-webkit-transform: rotateX(360deg)}

/*以X軸中心點旋轉*/
.box:hover{-webkit-transform: rotateY(360deg)}

/*自定義位置旋轉，變換旋轉焦點，父元素設定*/
.box{-webkit-transform-origin: 10px 10px;}  /*right top;*/
.box:hover{-webkit-transform: rotate(360deg)}

2、transform斜切 -- skew
注：倾斜函数 必須是block塊才可設置生效

/*沿X軸，即橫向平行四邊行*/
.box:hover{-webkit-transform: skewX(60deg)}

/*沿Y軸，即豎向平行四邊行*/
.box:hover{-webkit-transform: skewY(60deg)}

/*同時設定*/
.box:hover{-webkit-transform: skew(15deg,30deg)}

3、transform縮放 -- scale
注：缩放函数 取值 正数、负数和小数

.box:hover{-webkit-transform: scale(2,3);}

/*
-webkit-transform: scaleX(2);
-webkit-transform: scaleY(3);
*/

4、transform位移 -- translate

-webkit-transform: translate(100px,200px)

/*
-webkit-transform: translateX(100px);
-webkit-transform: translateY(100px);
*/

注意：transform執行順序，後寫的先執行：

.box:hover{-webkit-transform: translateX(100px) scale(0.5)  /*注意，后写的先执行*/}

ex1鐘表:
思路：60條秒鐘線使用li自動生成，一圈360deg，每秒rotate(6deg)，時線、分線、秒線分別定位居中，使用-webkit-transform-origin: bottom 使用變換焦點在底部，每隔5分鐘，為一長條，所以選擇器是5n+1;

<div id="wrap">
    <ul id="list">
        
    </ul>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div class="ico"></div>
</div>

#wrap{width:200px;height:200px;border:2px solid #000;margin:100px auto;border-radius:50%;position:relative}
#wrap ul{margin:0;padding:0;height:200px;position:relative;list-style:none}
#wrap ul li{width:2px;height:6px;background:#000;position:absolute;top:0;left:99px;-webkit-transform-origin:center 100px}
#wrap ul li:nth-of-type(5n+1){width:2px;height:12px}
#hour{width:6px;height:45px;background:#000;position:absolute;left:97px;top:55px;-webkit-transform-origin:bottom}
#min{width:4px;height:65px;background:#999;position:absolute;left:98px;top:35px;-webkit-transform-origin:bottom}
#sec{width:2px;height:85px;background:red;position:absolute;left:99px;top:20px;-webkit-transform-origin:bottom}
.ico{width:20px;height:20px;background:#000;border-radius:50%;position:absolute;left:90px;top:90px}

var wrap = document.getElementById('wrap')
var list = document.getElementById('list')
var css = document.getElementById('css') //給style加id
var hour = document.getElementById('hour')
var min = document.getElementById('min')
var sec = document.getElementById('sec')
var li = ''; //創建li
var ccss = '' // 動態創建css

for (var i = 0; i < 60; i++) {
  li += '<li></li>'
  ccss += '#wrap ul li:nth-of-type(' + (i + 1) + '){-webkit-transform: rotate(' + i * 6 + 'deg);}'   //#wrap ul li:nth-last-of-type(1){-webkit-transform: rotate(0);}
}
list.innerHTML = li;
css.innerHTML += ccss;
toTime()
setInterval(toTime, 1000)
function toTime() {
  var _date = new Date()
  var isec = _date.getSeconds();
  var imin = _date.getMinutes() + isec / 60;
  var ihour = _date.getHours() + imin / 60;
  sec.style.WebkitTransform = 'rotate(' + isec * 6 + 'deg)' //每秒走6deg
  min.style.WebkitTransform = 'rotate(' + imin * 6 + 'deg)' //每分钟走6deg
  hour.style.WebkitTransform = 'rotate(' + ihour * 30 + 'deg)' //每小时走30deg
}

4、transform矩阵函数 -- matrix

/*未完，待更*/

matrix(a,b,c,d,e,f)
a    c    e        x        ax    cy    e
b    d    f    *   y    =   bx    dy    f
0    0    1                 0     0     1

所以，變換後水平座標： ax + cy + e
          垂直座標： bx + dy + f

默認下公式 ：  transform: matrix( scaleX(),0,0,scaleY(),translateX(),translateY() );

縮放：scale
x轴缩放 a=x*a    c=x*c     e=x*e;
y轴缩放 b=y*b   d=y*d     f=y*f;

位移：translate()
x轴位移: e=e+x
y轴位移: f=f+y

旋轉:rotate()：
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

斜切：skew():
matrix(1,tan(θy),tan(θx),1,0,0)
x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现旋转
a=Math.cos(deg/180*Math.PI); 
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
变换兼容IE9以下IE版本只能通过矩阵来实现
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d

CSS3扇形導航

See the Pen WQbqeR by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

伸缩盒模型flex【新】
搞清主軸、側軸

主轴的方向主要是用来确定flex的主方向，所以你子元素要么放置在一行，要么放置在一列。侧轴主要垂直于主轴运行，如下图所示：

1、flex-grow:定義擴展比率，默認0，不允許負值

.ul1{width:900px}

/*子元素*/
.ul1 li:nth-child(1){width:200px}
.ul1 li:nth-child(2){-webkit-flex-grow:1;width:50px}
.ul1 li:nth-child(3){-webkit-flex-grow:3;width:50px}

/*計算方法
剩餘空間：900-200-50-50 = 600
分4份：600/4 = 150
1、200 +　600/4　* 0　＝　200
2、50 + 600/4 * 1 = 200
3、50 + 600/4 * 3 = 500 
*/

2、flex-shrink:定義收縮比率，默認1，不允許負值

.ul2{width:400px}

/*子元素*/
.ul2 li:nth-child(1){width:200px}
.ul2 li:nth-child(2){width:200px;flex-shrink:3}
.ul2 li:nth-child(3){width:200px;flex-shrink:1}

/*計算方法
超出空間：400-200-200-200 = 200
分5份：200/5 = 40
1、200 - 40 * 1　＝　160
2、200 - 40 * 3 = 80
3、200 - 40 * 1 = 160
*/

3、flex-basis:定義基準伸縮剩餘空間，默認auto

/* 當flex-grow:0;flex-shrink:1;時，flex-basis = max-width */

.ul3{width:400px}
.ul3 li{width:200px}

/*子元素*/
.ul3 li:nth-child(3){flex-basis:600px}

/*計算方法
li總空間：200+200+600 = 1000  即把flex-basis = width
所以比率為：200/1000、200/1000、600/1000
1、400 * 0.2 = 80
2、400 * 0.2 = 80
3、400 * 0.6 = 240
*/

/* 當 flex-shrink != 1 ，待續*/

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

4、flex-direction:定義書寫模式，默認row flex-direction：row | row-reverse | column | column-reverse flex-direction: 左對齊 | 右對齊 | 頂對齊 | 底對齊

/*父元素設置*/
.ul4{flex-direction: row;}

/*
    1 2 3  row          3 2 1 row-reverse

    1                   3
    2                   2
    3                   1
    column              column-reverse
*/

5、flex-wrap:控制flex容器單行或多行，默認nowrap
flex-wrap：nowrap | wrap | wrap-reverse

/*父元素設置*/
.ul5{width:220px;flex-wrap:wrap}

.ul5 li{width:100px;height:100px}

flex-flow：<' flex-direction '> || <' flex-wrap '>

6、align-content:控制子元素在flex容器中的位置,多行，左右上下居中；默認stretch

如：flex-start各行向flex容器的超始位置堆疊，第一行緊靠側軸，第二行堅靠前一行；

align-content：flex-start | flex-end | center | space-between | space-around | stretch

/*父元素設置*/

.ul6{-webkit-flex-flow: row wrap;} /*演示多行*/

.ul6.flex-start{-webkit-align-content: flex-start} /*第一行側軸 靠 父級側軸起始邊界*/
.ul6.flex-end{-webkit-align-content: flex-end}/*最尾行側軸，靠 父級側軸結束邊界*/
.ul6.center{-webkit-align-content: center}/**/
.ul6.space-between{-webkit-align-content: space-between} /*第一行=flex-start 尾行=flex-end*/
.ul6.space-around{-webkit-align-content: space-around} /*兩行兩兩間空間相等*/
.ul6.stretch{-webkit-align-content: stretch}/**/

7、align-items:控制子元素在flex容器中的位置,調整伸縮項目在側軸的對齊方式；；默認stretch;
如: flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
align-items：flex-start | flex-end | center | baseline | stretch

/*父元素設置*/
.ul7{-webkit-flex-flow:row wrap}

.ul7.flex-start{-webkit-align-items:flex-start;align-items:flex-start}
.ul7.flex-end{-webkit-align-items:flex-end;align-items:flex-end}
.ul7.center{-webkit-align-items:center;align-items:center}
.ul7.baseline{-webkit-align-items:baseline;align-items:center}
.ul7.stretch{-webkit-align-items:stretch;align-items:stretch}

align-content與align-items相似，但有區別
align-content:對齊伸縮行；
align-items:對齊伸縮項目
如：當=flex-start/flex-end/center，有多行時，align-content行與行之間無間隙，而align-items行與行之間均分flex容器的高！

8、justify-content：一般為向行調整，設置伸縮項目沿主軸的對齊方式，調整項目之間的間距。
---在主軸方向上設置任何margin都不會生效
justify-content：flex-start | flex-end | center | space-between | space-around

/*父元素設置*/

.ul9.flex-start{justify-content:flex-start} /*左對齊*/
.ul9.center{justify-content:center} /*居中對齊*/
.ul9.space-between{justify-content:space-between}  /*兩端對齊*/
.ul9.space-around{justify-content:space-around}  /*兩端對齊基礎上左右兩邊會有一半間隙縮進 */

9、order：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

/*子元素*/
.ul10 li:nth-child(1){order: 4}
.ul10 li:nth-child(3){order: -1}
.ul10 li:nth-child(1){order: 2}

10、可能較少用~align-self默認值为「auto」，則计算值为父元素的 <' align-items '> 值，否则为指定值。
align-self：auto | flex-start | flex-end | center | baseline | stretch

/*子元素*/
.ul8.flex-end li{-webkit-align-self:flex-end;align-self:flex-end}
.ul8.center li{-webkit-align-self:center;align-self:center}

See the Pen VvYyvp by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

---

以下佈局都須在父元素display:box 或 display:inline-box
1)彈性盒模型-佈局方向-子元素設置

Box-orient 定义盒模型的布局方向
:Horizontal 水平显示 //默認可不寫
:vertical 垂直方向
box-direction 元素排列顺序
:Normal 正
:Reverse 反
box-ordinal-group 设置元素的具体位置

/*I:父元素設置*/
.box{
    display:-webkit-box;
}
/*II:以下子元素設置*/
.box div{
    -webkit-box-orient:Horizontal /*水平默認可不寫*/
}

.box div:nth-of-type(1){
    -webkit-box-ordinal-group: 2 /*第1塊元素排第二位置*/
}

2)彈性盒模型-空間管理，子元素設置Box-flex ,即寬度width設置,加宽度：-固定宽度后再平分

/*I:父元素設置*/
.box{
    display:-webkit-box;
}
/*II:以下子元素設置*/
.box div:nth-of-type(1){
    -webkit-box-flex: 2; /*表示第1塊元素寬度點總寬的2份*/
}

3) 彈性盒模型-對齊，父元素設置box-pack，可理解為子元素左對齊，右對齊，居中，兩端對齊，
Start 子元素左
End 子元素右
Center 子元素居中
Justify 兩端對齊
相對應：
父元素設置 box-align，頂部Start 底部End 居中Center

另：未知宽度垂直居中： html{height:100%}body{height:100%}box{height:100%}

/*父元素*/
.box{
    -webkit-box-pack:Center;-webkit-box-align: center
}

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>


伸缩盒模型【旧】

See the Pen zvYMNX by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

---

盒模型陰影

box-shadow:[inset] x y blur [spread] color

盒模型倒影--只支持webkit below above left right

box-reflect direction 方向

    img { display: block; 
-webkit-box-reflect: below 5px 
-webkit-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); 
}

resize 自由缩放

Both 水平垂直都缩放
Horizontal 只水平方向缩放
Vertical 只垂直方向缩放
注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放

.box{ width: 100px; height: 100px; border: 5px solid #000;background: url("../c2.jpg");
    resize: both; 
    overflow: auto; 
}

box-sizing：content-box | border-box
Content-box 标准盒模型 width/height=border+padding+content
Border-box 怪异盒模型 width/height=content

---

父元素設置column，：

column-width 宽度 column-count 列数 column-gap 距离 column-rule 栏目间隔线

<div class="wrap">
    <p>中国看不起说大话的人。而在我看来大话并无甚，好比古代妇女缠惯了小脚，碰上正常的脚就称“大脚”；中国人说惯了“小话”，碰上正常的话，理所当然就叫“大话”了。</p>
    <p>敢说大话的人得不到好下场，吓得后人从不说大话变成不说话。幸亏胡适病死了，否则看到这情景也会气死。结果不说大话的人被社会接受了。</p>
</div>

.wrap{width:900px;border:1px solid #000;font:14px/28px '宋体';color:#000;text-indent:2em;-webkit-column-count:4;//分為四欄
-webkit-column-gap:20px;//每欄間距為20px,即padding
-webkit-column-rule:1px solid peru;//欄線顏色粗細
-moz-column-count:4;-mox-column-gap:20px;-moz-column-rule:1px solid peru}

See the Pen avvyLo by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

.box{ columns:200px 3; }

/*或*/

.box{ columns:200px; }