十月过得真快，转眼就月底了，我也迎来了我的第三个工作笔记。
1、元素滚动的属性
scrollWidth : 滚动元素内容的实际宽度
scrollHeight : 滚动元素内容的实际高度
scrollTop : 元素发生垂直滚动时，元素上方不可见内容的像素高度
scrollLeft : 元素发生水平滚动时，元素左侧不可见内容的像素高度
2、兼容IE浏览器将footer固定在底部的方法
html结构
<div class="wrapper">
<div class="main">content</div>
</div>
<footer class="footer">
<p>深圳市大拿科技有限公司</p>
</footer>
CSS结构
.wrapper {
min-height: 100%;
margin-bottom: -60px;
}
.wrapper:after {
content: "";
display: block;
}
.footer, .wrapper:after {
height: 60px;
}
这个布局可以解决移动端中fixed元素在出现虚拟键盘时失效的问题，亲测有效。
3、移动端开发：去掉input输入框自动补全的黄色阴影效果
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
其中六个参数的含义如下：
h-shadow : 水平阴影的位置
v-shadow: 垂直阴影的位置
blur: 模糊距离
spread: 阴影尺寸
color: 阴影的颜色
inset/outset : 内部阴影/外部阴影
4、移动端开发：去掉IOS、ipad按钮，输入框的默认样式和圆角
input[type="button"], input[type="submit"], input[type="text"], input[type="password"] {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击高亮的颜色*/
}
5、移动端的媒体查询-横屏和竖屏
@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、获取浏览器的语言
currentLang = navigator.language; //判断除IE外其他浏览器使用语言
if(!currentLang){ //判断IE浏览器使用语言
currentLang = navigator.browserLanguage;
}
最后，热爱生命，热爱学习~
