1.使用CSS穿透覆盖默认样式常见场景：如果我们需要通过input上传文件，type="file"，而这个input的默认样式可以说是非常的丑陋。所以我们希望传一张图片，和输入的一样大，位置在上面一致。这个时候，很明显，这个时候点击图片，输入是不行的。是因为img隔离了点击的穿透，而我们希望的是这个img只是在视觉上屏蔽了input的样式，但是点击的时候还是点击了input。所以，把img做成可穿透的就好了。css代码如下：img{pointer-events:none;}复制代码2.实现自定义原生select控件的样式因为select移动端原生样式比较丑，但是原生弹窗效果在符合我们的设计原则。在直接修改select的样式时，出现了一个奇怪的现象。在chrome调试的时候，自定义样式可以用，在安卓手机上也可以，但是在ios手机上不行。典型的不兼容问题，此时禁用原生样式即可。在这里，小编建了一个前端学习交流按钮群：132667127，自己整理的最新前端资料和进阶开发教程。喜欢的话可以进群学习交流css代码如下：select{-webkit-appearance:none;}复制代码3.文字溢出处理移动设备的页面比较小，往往需要展示一些信息被省略。最常见的是单行标题溢出和遗漏，以及多行详细介绍溢出和遗漏。现在都是用框架开发的。这种建议需要形成一个基础组件，方便快捷。css代码如下：//singleline.single{overflow:hidden;空白：nowrap；text-overflow:ellipsis;}//多行.more{display:-webkit-box!important;溢出：隐藏；文本溢出：省略号；工作休息：打破一切；-webkit-box-orient：垂直；-webkit-line-clamp:2;//指定行数}复制代码4.启用弹性滚动css代码如下：body{overflow:scroll;-webkit-overflow-scrolling:touch;}复制代码注意：Android不支持原生弹性滚动，但可以借助第三方库iScroll实现。5、一像素边框设置很多时候，我想在任何设置中都让边框的大小保持在1px，但是因为1px使用的是2dp渲染，也就是说在大小上会显示为2px。因此，使用css3对其进行缩放。css代码如下：.folderli{position:relative;padding:5px;}.folderli+li:before{position:absolute;顶部：-1px；左：0；内容：””;宽度：100%；高度：1px；border-top:1pxsolid#ccc;-webkit-transform:scaleY(0.5);}复制代码6.阻止鼠标选择事件
