十月過(guò)得真快，轉(zhuǎn)眼就月底了，我也迎來(lái)了我的第三個(gè)工作筆記。

1、元素滾動(dòng)的屬性

scrollWidth : 滾動(dòng)元素內(nèi)容的實(shí)際寬度

scrollHeight : 滾動(dòng)元素內(nèi)容的實(shí)際高度

scrollTop : 元素發(fā)生垂直滾動(dòng)時(shí)，元素上方不可見(jiàn)內(nèi)容的像素高度

scrollLeft : 元素發(fā)生水平滾動(dòng)時(shí)，元素左側(cè)不可見(jiàn)內(nèi)容的像素高度

2、兼容IE瀏覽器將footer固定在底部的方法

html結(jié)構(gòu)

<div class="wrapper">
    <div class="main">content</div>
</div>
<footer class="footer">
    <p>深圳市大拿科技有限公司</p>
</footer>

CSS結(jié)構(gòu)

.wrapper {
  min-height: 100%;
  margin-bottom: -60px;
  }
.wrapper:after {
  content: "";
  display: block;
  }
.footer, .wrapper:after {
  height: 60px;
  }

這個(gè)布局可以解決移動(dòng)端中fixed元素在出現(xiàn)虛擬鍵盤(pán)時(shí)失效的問(wèn)題，親測(cè)有效。

3、移動(dòng)端開(kāi)發(fā)：去掉input輸入框自動(dòng)補(bǔ)全的黃色陰影效果

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
}

其中六個(gè)參數(shù)的含義如下：

h-shadow : 水平陰影的位置

v-shadow: 垂直陰影的位置

blur: 模糊距離

spread: 陰影尺寸

color: 陰影的顏色

inset/outset : 內(nèi)部陰影/外部陰影

4、移動(dòng)端開(kāi)發(fā)：去掉IOS、ipad按鈕，輸入框的默認(rèn)樣式和圓角

input[type="button"], input[type="submit"], input[type="text"], input[type="password"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /* 點(diǎn)擊高亮的顏色*/
}

5、移動(dòng)端的媒體查詢-橫屏和豎屏

@media only screen  and  (orientation: portrait) {
  
  /* 豎屏CSS代碼 */
  
}

@media only screen  and  (orientation: landscape) {
  
  /* 橫屏CSS代碼 */
  
}

6、不定高元素水平垂直居中

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

7、獲取瀏覽器的語(yǔ)言

currentLang = navigator.language;   //判斷除IE外其他瀏覽器使用語(yǔ)言
    if(!currentLang){  //判斷IE瀏覽器使用語(yǔ)言
      currentLang = navigator.browserLanguage;
    }

最后，熱愛(ài)生命，熱愛(ài)學(xué)習(xí)~