记录一些遇到的css问题

记录一些遇到的css问题,不同的设备对css的支持不一样,可能出现不同的效果

# ios底部input输入框的fixed问题

  • ios的fixed可能会没有效果,具体可以去搜搜
  • 过长的页面会使fixed变为absolute,固定的内容就随页面移动了
  • 解决方法
  • 将父级元素改为absolute,或者外层加一个absolute的div
  • 将自身的fixed改为absolute
<div class="box">
  <div class="content"></div>
  <div class="input"></div>
</div>
.box {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.content {
  height: calc(100% - 60px);
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.input {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}

# ios 的底部输入框在输入法弹起后被挡住

  • 试了千百种方法,没找到完美的解决办法
  • 我的暴力临时方法
  • 通过 js 判断是否是 ios 设备,如果是
  • 在 input 获取焦点后设置其父级的高度为 当前高度 - 被挡住的高度
  • 在 input 失去焦点后恢复其父级的高度
  • 如果不是则不变
  • 这样很可能有时会使输入法与输入框之间出现间隙

# 行内元素之间多余的间隔

  • 由于html的结构关系,行内元素会出现多余的间隔
  • 两个 img 之间也是一样
  • 简单的解决办法就是将父级的 font-size 指定为 0px
  • 行内元素的间隙就消失了
  • 注意:这是行内元素字体的行高也同时消失了
  • 需要重新指定行内字体的行高

# 行内元素顶部对齐

  • 行内元素的顶部没有对齐
  • 需要设置行内元素 vertical-align: top;
  • 这时行内元素上面就齐平了

# IE 的 backgroun-img 图像消失

  • 设置 display 为 inline-block 或 block 解决

# 隐藏 select 的箭头

select {
  appearance: none;
}
select::-ms-expand { 
  display: none;
}

## 隐藏 input number 的箭头

``` css
input[type="number"] {
  appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
}

# 设置全局的默认字体样式

body, input, textarea, button, select {
  font-family: "";
}

# 修改边框类型

box-sizing: border-box;

# 去除手机点击的蓝色遮罩

-webkit-tap-highlight-color: transparent;
html页面加载优化

html页面加载优化

通过使用 preload、prefetch 来优化页面加载

ES6 Module (模块)

ES6 Module (模块)

Module基本用法

  • 通过 Module 的 export 与 import 来分割代码,集中相同的代码,优化逻辑