工作笔记（三）

2023年2月9日 219次阅读 来源: wuyadream

十月过得真快，转眼就月底了，我也迎来了我的第三个工作笔记。

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;
    }

最后，热爱生命，热爱学习~

    原文作者：wuyadream
    原文地址: https://www.jianshu.com/p/c42b2cf074ca
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞