近期项目设计知识点总结：flex布局、canvas、引入外部字体、rem、匹配选择器等

一、伪类、伪元素
锚伪类 a:link a:visited a:hover a:active分别是链接未访问时，链接被访问过后，鼠标悬停在链接上，鼠标点击链接那一瞬间，需按顺序设置


二、js禁止移动端页面滑动
①、position:fixed
②、$(document).on('touchmove',function(e){
e.preventDefault();
})
//preventDefault()方法将通知浏览器不要执行与事件关联的默认动作（如果存在）


三、正则表达式实现表单验证
姓名只能为中文或英文：/^[\u4e00-\u9fa5A-Za-z0-9-_\s]*$/
电话号码：/^0?1[3|4|5|7|8][0-9]\d{8}$/


四、页面加载完毕再执行js
①、onLoad="main()"//将js写在main()里
②、$(function(){})


五、播放背景音乐
<audio src=""></audio>
属性：autoplay自动播放/controls显示播放控件/loop循环播放/preload页面加载后是否载入音频


六、当前页面事件只发生一次
点击播放音效，只播放一次
$("#container").bind('click',function(){
var audio=$("#audio")[0];
audio.play();
$(this).unbind('click');
});


七、引入外部字体
@font-face {
      font-family: <YourWebFontName>;//字体起名
      src: <source> [<format>][,<source> [<format>]]*;//source为路径，format为字体格式，用于浏览器识别
      [font-weight: <weight>];
      [font-style: <style>];
}
实例：
/*达到比较好的浏览器支持*/
@font-face {
  font-family: 'lvr';
  src: url('../font/LouisVuittonGlobal-Regular.eot'); /* IE9 Compat Modes */
  src: url('../font/LouisVuittonGlobal-Regulart.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/LouisVuittonGlobal-Regular.woff') format('woff'), /* Modern Browsers */
       url('../font/LouisVuittonGlobal-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../font/abchanelcouture-reg-webfont.svg') format('svg'); /* Legacy iOS */     
  font-style: normal;
}


src: local(font name), url("font_name.ttf")//先从用户系统加载字体，失败再加载webfont


八、动画结束后保持结束状态
animation-fill-mode : forwards;


九、一些不常用的选择器
>子选择器，选择所有直接子类
+相邻选择器，选择同一个父元素下的紧邻的下一个元素
~匹配选择器，选择后面所有的同级指定元素
a.b{}class同时为a和b时生效


十、rem
1rem=根元素设置的px大小
在最前面加载一段js来监听浏览器动态修改html的font-size
<script>
    
(function (doc, win) {
        
var docEl = doc.documentElement,
                
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                
recalc = function () {
                    
var clientWidth = docEl.clientWidth;
                    
if (!clientWidth) return;
                    
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
                
};
if (!doc.addEventListener) return;
       
win.addEventListener(resizeEvt, recalc, false);
        
doc.addEventListener('DOMContentLoaded', recalc, false);
    
})(document, window);

</script>

十一、css3动画

十二、3d变换

transform-style:flat|preserve-3d
flat表示所有子元素在2d平面呈现 
preserve-3d表示所有子元素在3d空间呈现、


backface-visibility:hidden;从正面看不见背面
backface-visibility:visible;从正面能看见背面


3D变换：
位移：translateZ()和translate3d(z,y,z)//z不能取百分值
旋转：rotateX(),Y,Z,rotate3d()
缩放：scaleZ(),scale3d()
矩阵：matrix3d()


opacity:0(除IE之外的浏览器) = filter:Alpha(opacity=0)(兼容IE)


transition和animation 注意区分

十三、canvas

http://blog.youkuaiyun.com/sinat_24239191/article/details/78711882

十四：flex布局

http://blog.youkuaiyun.com/sinat_24239191/article/details/78711898