H5+CSS一揽子方案

H5网络 ononline,onoffline,window.addEventListener("onlinne/offline")
全屏 div.[webkit|moz|ms|o]RequestFullScreen(),document.[webkit|moz|ms|o]CancelFullScreen(),document.[webkit|moz|ms|o]FullScreenElement()
文件 FileReader 1.readAsText(),2.readAsBinaryString(),3.readAsDataURL(),abort()
    读取状态：onabort,onerror,onload,onloadend,onloadstart,onprogress
拖拽 draggable="true" 事件ondrag,ondragstart,ondragend,ondragenter,ondragover,ondrop,ondragleave,dataTransfer对象.setData()|getData()
定位 getLocation(),navigator.geolocation.getCurrentPosition(showPosition,showError,{/*enableHighAccuracy:true,timeout:3000*/})
浏览器存储 5M存在当前页面内存window.sessionStorage.setItem(key,value)|getItem(key)|removeItem(key)|clear()
浏览器共享存储 20M存在硬盘共享window.localStorage.setItem(key,value)|getItem(key)|removeItem(key)|clear()
缓存 manifest="demo.appcache"
视频播放 currentTime,duration,paused,load(),pause(),play(),oncanplay,ontimeupdate,onended

CSS3
属性选择器:li[class]、li[class=red]、li[class*=red]、li[class^=red]、li[class$=red]，
    元素选择器 (type selectors)：div {}
    通用选择器 (universal selector)：* {}
    id 选择器 (id selectors)：#xxx {}
    类选择器 (class selectors)：.xxx {}
    属性选择器 (attribute selectors)
    [attr] - 拥有 attr 属性的元素
    [attr=val] - attr 属性等于 val 的元素
    [attr~=val] - attr 属性包含 val 的元素（空格分割）
    [attr|=val] - attr 属性等于 val 或者以 'val-' 开头
    [attr^=val] - attr 属性以 val 开头的元素
    [attr$=val] - attr 属性以 val 结尾的元素
    [attr*=val] - attr 属性包含 val 的元素（无需空格分割）
    后代选择器 (descendant combinator空格分隔)：div span {}
    子选择器 (child combinators)：div>span {}
    相邻兄弟选择器 (adjacent sibling combinator)：div+p
    全体兄弟选择器 (general sibling combinator)：div~p
    选择器组
    交集选择器：div.one {}
    并集选择器：div, .one, [title="test"] {}
伪类选择器:兄弟伪类（+、~），相对于父元素的结构伪类li:first-child{color:red}|last-child|first-of-type|lat-of-type|
    x的父元素中的第n|偶数|奇数|前5个子元素x:nth-child(5|even|odd|-n+5)
    :nth-last-child() 语法跟 :nth-child() 类似，不同点是 :nth-last-child() 从最后一个子元素开始往前计数
    :nth-of-type() 用法跟 :nth-child() 类似不同点是 :nth-of-type() 计数时只计算同种类型的元
    父元素中的第n|偶数|奇数|前5个子x元素，x:nth-of-type(5|even|odd|-n+5)|
    :nth-last-of-type() 从最后一个这种类型的子元素开始往前计数
    empty，锚链接伪类h2:target{color:red}
伪元素选择器 E::before、E::after,注意content:"";position:absolute|relative|fix; | float | display
    p::first-letter|first-line|selection{color:red;font-size:30px;float:left;/*文本环绕*/}
属性优先级权重 !important > 内联样式 > id > class、属性、伪类 > 标签（元素）、伪元素 > 通用（*）
    !important：10000
    内联样式：1000
    id选择器：100
    类选择器、属性选择器、伪类：10
    元素选择器、伪元素：1
    通配符：0
颜色 1.使用预设值red，2.颜色拾取器#fff，3.RGBA---红橙黄绿青蓝紫，4.HSLA(颜色0-360、饱和度0-100、亮度0-100、透明度0-1)
阴影 text-shadow:2px 3px 2px #000 /*左 右偏移 模糊 颜色*/
盒模型 padding+border+width=盒子宽度，padding+border+height=盒子高度
    box-sizing:content-box;/*仅内容宽高*/，box-sizing:border-box;/*盒子最终宽高*/
圆角 左上、右上、右下、左下 border-radius:10px 30px 10px 20px;border-radius:10px/30px;/*椭圆*/ border-top-right-radius:10px 30px;
渐变 linear-gradient线性 radial-gradient径向（circle，ellipse），repeating-linear-gradient，repeating-radial-gradient
背景 background-color,background-image,background-repeat:no-repeat|round|space,background-attachment:fixed|scroll|local
     background-clip|background-origin:padding-box|border-box|content-box; background-position:center;background-size:50% 50%;contain,cover
边框图片 border-image border-image-source:url("xxx.png");border-image-slice:27 fill;border-image-width:27px; border-image-outset:27px;border-image-repeat:round;
过渡 transition:属性 过渡 时间 延迟; transition-property:left;transition-duration:2s;transition-timing-function:linear;transition-delay:2s;
2D转换 div:active{transform:translate(x,y) scale(x,y);|scaleX()|scaleY()|旋转rotate(-90deg)|倾斜skew(30deg)}|旋转轴心transform-origin:left top;
       居中 .box{position:relative;} .rec{left:50%;top:50%;transform:translate(-50%,-50%);}
3D移动 div:active{transform:translate3d(x,y,z) scale(x,y,z) rotate(x,y,z,-90deg) }
       保留效果transform-style:preserve-3d;透视距离perspective:0px;透视角度perspective-origin: 0px 0px;
动画 animation-name:moveTest;animation-duration:2s; @keyframes moveTest{0%|from{transform:translate(0,0)} 100%|to{transform:translate(500px,600px)}}
     动画播放次数animation-iteration-count:infinite;交替动画animation-direction:alternate;延迟animation-delay:2s;动画结束时状态animation-fill-mode：forwards|backwards|both;
     时间函数animation-timing-function:匀速linear|60步steps(60);播放状态animation-play-state:running;
字体 @font-face {font-family:'xxx';src|url('xxx.ttf') format('truetype'),...} .myFont{font-family:xxx}
多列布局 column-count|column-rule|column-gap|column-width|column-span
伸缩布局 .box{
            display:flex; //必须
            主侧轴对齐方向(横排、竖排)flex-direction:row|row-reverse|column|column-reverse
            设置子元素主轴方向上水平对齐justify-content:flex-start|flex-end|center|space-between（元素顶个等分）|space-around(元素带间隔等分，两个间双间隔距离);
            设置侧轴方向上垂直对齐align-items:flex-start|flex-end|center|拉伸stretch|文本基线baseline;
            设置子元素相对父元素的对齐align-self:flex-start|flex-end|center|拉伸stretch|文本基线baseline;
            flex-flow:row wrap;是否换行flex-wrap:nowrap|wrap|翻转wrap-reverse;
        }
        .div1{flex:1;|子元素宽度扩展按比例flex-grow:0;定义收缩比例flex-shrink:1;}
        .div2{flex:4;设置单个元素侧轴方向上垂直对齐align-self:flex-start|flex-end|center|拉伸stretch}