在一样平常工作中，经常会遇到林林总总的坑，偶然真的以为许多时刻开辟的履历都是踩坑踩出来的。在通往大牛的道路上，愿望本身能够逾越重重障碍，越走越远。学会经常总结，不停提拔本身。
本文章旨在总结开辟过程当中遇到的轻易遗忘或许比较主要的坑，一方面加深本身关于该部份的明白，另一方面愿望能够分享给人人，学问在于分享，固然踩过的坑也不破例（诙谐）。
目次
- margin 堆叠题目
- placeholder 自定义款式
- 伪类和伪元素
- title 超越省略
- scroll 自定义款式
- sticky 定位
- 设置 swiper
- 挪动端键盘遮挡题目
- 异步回调解决方案
1. margin 堆叠题目
这是一个比较罕见的经常在开辟中遇到的题目，这里就不多说了，罕见解决办法：
1. 建立新的 BFC 如 overflow: hidden;
2. 运用 padding
3. 只管运用统一方向的 margin2. 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 ，默许 false
observer: 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 能够经由过程链式挪用避免了层层嵌套，同时便于代码浏览和明白。
