前端开发小笔记为整个文档设置的字体不会应用于input、button、select和textarea等元素，需手动设置。

1.重置button和input元素的背景

button {
    appearance: none;
    background: transparent;
}

2.字体与交互式HTML元素不兼容

为整个文档设置的字体不会应用于input、button、select和textarea等元素，需手动设置。

input, button, select, textarea {
    font-family: your-awesome-font-name;
}

3.查看页面盒子脚本

[].forEach.call(?("*"), function(a) {
    a.style.outline 
    ="1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

4.文本超出省略

//一行
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
//两行
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

5.移动端滚动不流畅问题

正常的移动端上下滑动，松开手指页面还会速度递减的再滑动一段距离，但是有时候会出现手指松开滑动就停止的情况，导致页面出现卡顿的现象。可以在添加了overflow: auto;的元素上再添加下面的属性实现惯性滚动：

-webkit-overflow-scrolling:touch;