在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。
本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自己对于该部分的理解，另一方面希望能够分享给大家，知识在于分享，当然踩过的坑也不例外（滑稽）。
目录
- margin 重叠问题
- placeholder 自定义样式
- 伪类和伪元素
- title 超出省略
- scroll 自定义样式
- sticky 定位
- 配置 swiper
- 移动端键盘遮挡问题
- 异步回调解决方案
1. margin 重叠问题
这是一个比较常见的经常在开发中碰到的问题，这里就不多说了，常见解决办法：
1. 创建新的 BFC 如 overflow: hidden;2. 使用 padding3. 尽量使用同一方向的 margin
2. placeholder 自定义样式
之前开发项目中碰到的需求，兼容写法如下：
/* IE 9 及以下版本不支持 */input:-ms-input-placeholder {}input:-moz-placeholder {}input::-moz-placeholder {}input::-webkit-input-placeholder {} 3. 伪类和伪元素
这两者很容易混淆，说的简单的一点，两者的区别在于：
CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。
4. title 超出省略
在移动端标题超出部分还是比较常见的，兼容性也 ok：
display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 1;
5. scroll 自定义样式
/* Chrome */::-webkit-scrollbar //滚动条整体部分::-webkit-scrollbar-button //滚动条两端的按钮::-webkit-scrollbar-track // 外层轨道::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个::-webkit-scrollbar-corner //边角::-webkit-resizer ///定义右下角拖动块的样式/* IE */ scrollbar-base-color: #C0C0C0; scrollbar-base-color: #C0C0C0; scrollbar-3dlight-color: #C0C0C0; scrollbar-highlight-color: #C0C0C0; scrollbar-track-color: #EBEBEB; scrollbar-arrow-color: black; scrollbar-shadow-color: #C0C0C0; scrollbar-dark-shadow-color: #C0C0C0;
Chrome 几乎可以完整修改 scrollbar 样式，但是 IE 比较有局限性，只能修改颜色，如果想要完美兼容，那么只能自己模拟实现一个 scrollbar 了。
6. sticky 定位
粘性定位，是一个比较有趣的 CSS3 属性，粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
实例 demo :
7. 配置 Swiper
Swiper 是一个使用率很高的插件，这里说一些比较陌生的属性与方法：
//活动块居中centeredSlides: true,//触摸距离与 slide 滑动距离的比率touchRatio: 0.5,//当 swiper 样式或者子元素改变时，会自动初始化 swiper ，默认 falseobserver: true,//swiper从当前slide开始过渡到另一个slide时执行。触摸情况下，如果释放slide时没有达到过渡条件而回弹时不会触发这个函数onSlideChangeStart: function(swiper) { //获取当前索引 console.log(swiper.realIndex);},//回调函数，当你轻触(tap)Swiper后执行。onTap: function(swiper) { //获取 tap 索引 mySwiper.slideTo(swiper.clickedIndex);} 8. 移动端键盘遮挡问题
有些时候，如：需要将某一 button 固定到屏幕底部，这个时候如果弹出键盘，那么 button 则会跟着跑到键盘上面（无论是 absolute 还是 fixed），所以可以在 focus 的时候，隐藏 button，而在 blur 的时候显示 button ，但是这时有一个问题：在安卓手机上没有问题，收起键盘可以出发 blur 事件，但是 IOS 端则没有触发，所以解决办法是，可以改用 resize 事件替代 blur 事件。
9. 异步回调解决方案
异步处理一直以来都是 js 极其重要的一部分，这里暂不提框架，原始的异步处理一般是：
创建异步对象XMLHttpRequest。设置请求参数（请求方式，请求资源的相对路径，是否异步）。设置回调函数，用来处理服务器响应，使用onreadystatechange。获取异步对象的readyState属性，根据服务器返回状态信息判断是否请求成功。
如果存在多个请求，且数据相互有依赖关系的话，代码写起来会比较复杂，看起来杂乱无章，同时不利于后期维护。在 ES6 中，提出了 Promise 的概念，给出了异步回调的解决方案：
var task = new Promise(function(resolve, reject) { if (/* 异步操作成功 */){ resolve(result); } else { reject(error); }});task.then(function(response) { // success}, function(error) { // fail}); 可以看出，使用 Promise 可以通过链式调用避免了层层嵌套，同时便于代码阅读和理解。