总结一下一些知识。
1.利用CSS穿透
常见发生场景：假如我们需要通过input，type=‘file’来上传文件，而这个input的默认样式，可以说是非常地“不人道”。所以我们希望通过一张图片，与这个input大小一样，位置一致地盖在上面。这个时候，显然，这个时候点击图片，input是不会起作用的。就是因为img隔绝了click的穿透，而我们希望的是，这个img只是视觉上遮挡了input的样式，但是点击的时候还是点击到input。所以，只要让img可穿透即可。
css代码如下：
img{pointer-events: none;}
2.实现自定义原生select控件的样式
由于select移动端原生样式很丑，但是原生弹出效果是符合我们设计的原则。直接修改select的样式的时候，一个奇怪的现象出现了，在chrome上调试的时候，自己定义的样式起了作用，在Android手机上也起了作用，但是到了ios手机上就不行了，典型的不兼容问题，这个时候禁用原生的样式即可。
css代码如下：
select{-webkit-appearance: none;}
3.文本溢出处理
移动设备相对来说页面较小，很多时候显示的一些信息都需要省略部分。最常见的是单行标题溢出省略，多行详情介绍溢出省略。
css代码如下：
//单行
.single{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
//多行
.more{
display:-webkit-box !important;
overflow:hidden;
text-overflow:ellipsis;
work-break;break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; //指定行数
}
4.300毫秒的故事
移动设备访问的web页面都是pc上的页面。在默认的viewport（980px）的页面往往都是需要“双击”或“捏开”放大页面来看清页面。而正是为了确认用户是“双击”还是“单击”。safari需要个300ms的延迟来判断。而后来的iphone也一直沿用这样的设计，再后来android也沿用了这样的设计。于是，“300ms的延迟”就成了一道规范。
处理方法：
使用自定义Tap事件代替click事件。 原理：在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置（或允许移动一个非常小的位移值）且时间间隔较短（一般认为是200ms），且过程中未曾触发过touchmove，即可认为触发了手持设备上的click，一般称它为“tap”。
5.Tag透传的解决方案
①.使用缓动动画，过渡300ms的延迟。
②.中间层dom元素加入，让中间层接受这个“穿透”事件，稍后隐藏。
③.“上下”都使用tap事件，原理上解决tap透传事件（但不可避免原生标签的click事件）。
④.改用Fastclick的库。
6.开启弹性滚动
css代码如下：
body{
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
注意：Android不支持原生的弹性滚动，但可以借助第三方库iScroll来实现。
7.点击不灵敏
起因：由于使用touch触发自定义tap事件，提速约200ms，但是touch事件对点击区域要求更大，偶有不触发。
解决方案：
①同时使用touchend和click触发tap事件，如果touchend已经处理，则click不处理。
②全局捕获click事件，如果click事件和tap事件的点击坐标一致，且相差不到1s。则在捕获阶段阻止事件默认行为的同时取消冒泡。
8.chrome调试快捷键
①ctrl+shift+f 全文查找
②ctrl+o 查找文件名
③ctrl+shift+o 查找js函数名
9.弹性图片
主要用在百分比布局中，用一个父标签包裹img标签，父元素的宽度用媒体查询来改变。
css代码如下：
img{
max-width:100%;
}
10.一像素边框设置
很多时候，想保持边框的大小在任何设置上都是1px，但是因为1px使用2dp渲染，也就是说会显示为2px大小。所以，要采用css3缩放一下。
css代码如下：
.folder li{
position:relative;
padding:5px;
}
.folder li+li:before{
position:absolute;
top:-1px;
left:0;
content:‘ ‘;
width:100%;
height:1px;
border-top:1px solid #ccc;
-webkit-transform:scaleY(0.5);
}
努力学习。。。