- ie10以上版本瀏覽器input框輸入文字后出現(xiàn)小×，便于用戶刪除內(nèi)容，但實際開發(fā)時，我們往往會自定義小×（自帶的往往和我們做的input框很不搭），這時候需要清除 ：
/*--清除谷歌瀏覽器下的 search 叉號*/
input::-webkit-search-cancel-button{
display: none;
}
/*--清除IE下的 search 叉號*/
input::-ms-clear{display: none;}
發(fā)現(xiàn)在ie瀏覽器的input框輸入的內(nèi)容總是靠向input框的下面，而谷歌就垂直居中。
解決方法：給input一個行高（height：30px; line-height: 30px;）即可，因為谷歌直接給個height就能居中，我就沒加行高，沒想到在ie測試的時候發(fā)現(xiàn)了兼容問題Math.floor() 返回小于或等于一個給定數(shù)字的最大整數(shù)。
css3的換行：單詞中間沒有空格而且有很長，會在div中溢出（只在一行顯示超出盒子）。
這時候可以css3中的新屬性：允許長文本換行：
p {word-wrap:break-word;}
單詞在換行時，整個單詞不會拆開，css3中新增了單詞強(qiáng)制拆分換行（用途不明白）
p.test1 {
word-break: keep-all;
}//單詞不拆分
p.test2 {
word-break: break-all;
}//單詞強(qiáng)制拆分
雖然不明白他的意義，但我在工作中還真用到了這個霸道的方法，同事調(diào)取的后臺數(shù)據(jù)（純英文）單詞之間的空格全部由 表示了，如圖：
2018-08-15_204414.png
導(dǎo)致這所有的文本全部在一行顯示了，我的想法是：在瀏覽器眼里這是一個長單詞，一個單詞就無法使用word-break: keep all;只能使用word-wrap:break-word;使長文本換行，不過換行處的單詞全被強(qiáng)行拆分了，圖片上的問題我蠻奇怪的，是后臺調(diào)取數(shù)據(jù)的問題？
- css3設(shè)置多個背景圖片疊放，
2018-08-15_210448.png
css3設(shè)置背景圖像的位置區(qū)域：
2018-08-15_211714.png
2018-08-15_211524.png
- 點擊按鈕返回頂部效果（js）：用了一個定時器，每30ms滾動條的位置上移一點，上移的距離越來越小，越靠近頂部上移的速度越慢，當(dāng)滾動條距離頂部為0 ，刪除定時器；或者在返回頂部的過程中用戶移動滾動條，結(jié)束返回頂部效果，刪除定時器，在當(dāng)前頁面停下來。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
<style>
div.a{
width:300px;
height:10000px;
}
div.b{
width:100%;
height:950px;
position:relative;
background:yellow;
}
#btn{
position: fixed;
bottom:20px;
right:20px;
width:100px;
height:100px;
border:1px solid red;
display: none;
}
</style>
</head>
<body>
<div class='a'>
<div class='b'></div>
</div>
<div id="btn">返回頂部</div>
<script>
window.onload = function(){
var btn = document.getElementById('btn');
var timer = null;
var isTop = true;
//獲取頁面可視區(qū)高度
var clientHeight = document.documentElement.clientHeight;
console.log(clientHeight)
//滾動條滾動時觸發(fā)
window.onscroll = function() {
//顯示回到頂部按鈕
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop >= clientHeight) {
btn.style.display = "block";
} else {
btn.style.display = "none";
};
//回到頂部過程中用戶滾動滾動條，停止定時器
if (!isTop) {
clearInterval(timer);
};
isTop = false;
};
btn.onclick = function() {
//設(shè)置定時器
timer = setInterval(function(){
//獲取滾動條距離頂部高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log('osTop '+osTop);
var ispeed = Math.floor(-osTop / 7);
console.log('ispeed '+ispeed);
document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
//到達(dá)頂部，清除定時器
if (osTop == 0) {
clearInterval(timer);
};
isTop = true;
},30);
};
};
</script>
</body>
</html>
