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