input自带小×；点击按钮返回顶部；工作总结

1. ie10以上版本浏览器input框输入文字后出现小×，便于用户删除内容，但实际开发时，我们往往会自定义小×（自带的往往和我们做的input框很不搭），这时候需要清除 ：

/*--清除谷歌浏览器下的 search 叉号*/
input::-webkit-search-cancel-button{
    display: none;
}
/*--清除IE下的 search 叉号*/
input::-ms-clear{display: none;}

2. 发现在ie浏览器的input框输入的内容总是靠向input框的下面，而谷歌就垂直居中。
   解决方法：给input一个行高（height：30px; line-height: 30px;）即可，因为谷歌直接给个height就能居中，我就没加行高，没想到在ie测试的时候发现了兼容问题

3. Math.floor() 返回小于或等于一个给定数字的最大整数。

4. css3的换行：单词中间没有空格而且有很长，会在div中溢出（只在一行显示超出盒子）。
   这时候可以css3中的新属性：允许长文本换行：

p {word-wrap:break-word;}

单词在换行时，整个单词不会拆开，css3中新增了单词强制拆分换行（用途不明白）

p.test1 {
    word-break: keep-all;
}//单词不拆分
 
p.test2 {
    word-break: break-all;
}//单词强制拆分

虽然不明白他的意义，但我在工作中还真用到了这个霸道的方法，同事调取的后台数据（纯英文）单词之间的空格全部由 表示了，如图：

2018-08-15_204414.png

导致这所有的文本全部在一行显示了，我的想法是：在浏览器眼里这是一个长单词，一个单词就无法使用word-break: keep all;只能使用word-wrap:break-word;使长文本换行，不过换行处的单词全被强行拆分了，图片上的问题我蛮奇怪的，是后台调取数据的问题？

5. css3设置多个背景图片叠放，
   
   

   2018-08-15_210448.png

css3设置背景图像的位置区域：

2018-08-15_211714.png

2018-08-15_211524.png

5. 点击按钮返回顶部效果（js）：用了一个定时器，每30ms滚动条的位置上移一点，上移的距离越来越小，越靠近顶部上移的速度越慢，当滚动条距离顶部为0 ，删除定时器；或者在返回顶部的过程中用户移动滚动条，结束返回顶部效果，删除定时器，在当前页面停下来。

    
        
    



    


返回顶部