H5知识点

1、让小喇叭上下居中

WechatIMG24.png

父元素display: flex; align-item: center;
或者给喇叭设置：vertical-align: middle; margin-top: -1px;

2、当span与块级元素处于同一行时，span总是会靠下，无法同时居中
原因在于：

span一般默认按照块级元素的下基准线对齐

解决方法：

span添加样式vertical-align: top

3、CSS样式中的 & 是什么作用

.box {
   &:before {
        bg-color: #333;
    }
}

解析：
& 表示在嵌套层次中回溯一层，即
&:before相当于.box:before
&:after相当于.box:after
:before和:after是CSS中的伪元素，在这里分别表示为在使用box类的元素前面和后面插入指定内容

4、@mixin 混入的定义与引入，可以传参，也可不传。 sass语法糖

mixin定义（使用@mixin定义）：
@mixin hexagon-generator($hexagon-width, $factor, $border-radius){
  display: inline-block;
  border-radius: 50%;
  width: ($hexagon-width + $border-radius) * $factor;
  height: ($hexagon-width + $border-radius) * $factor;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hexagon-shape {
    @include hexagon-generator(88rpx, 1, 8rpx);
}

使用
.hexagon-shape {
    display: inline-block;
    border-radius: 50%;
    width: (88rpx + 8rpx) * 1;
    height: (88rpx + 8rpx) * 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

5、在定位中我们通过top right bottom left 这四个属性决定定位元素的位置。

（1）相对定位：position : relative
在相对定位中，定位元素是根据自己原本所在位置进行定位，相对定位不会脱离文档流，在文档流中不会影响其他元素，偏移量根据给定的值，值可以为负数；

top 数值越大越往下顶部与原位置差
bottom 数值越大越往上底部与原位置差
left 数值越大越往右左边与原位置差
ight 数值越大越往左右边与原位置差
特点占原位置，在文档流中占位置。

（2）绝对定位：position:absolute
绝对定位中，定位依据是定位元素的父级，直到找到body元素，绝对定位的元素会脱离文档流，行内可以设置宽高，块元素不独占一行，由内容撑开宽高；

*top 数值越大越往下顶部与定位父级的顶部之差
*bottom 数值越大越往上底部与定位父级的底部之差
*left 数值越大越往右左边与定位父级的左边之差
*right 数值越大越往左右边与定位父级的右边之差
特点脱离文档流

（3）固定定位：position:fixed
根据浏览器窗口的位置和大小进行定位，元素的位置在屏幕内容滚动时不会改变位置，固定定位的元素会移出文档流；

*top 根据窗口的上边进行定位
*bottom 根据窗口的下边进行定位
*left 根据窗口的左边进行定位
*right 根据窗口的右边进行定位

6、本地配置localhost

sudo vi /etc/hosts
配置添加：
127.0.0.1   localhost

7、偶然发现关闭node服务之后，再起启动，一直启动不了，提示端口占用
Error: listen EADDRINUSE: address already in use :::3333
解决办法：
终端输入 sudo lsof -i:端口号（端口号换成你的），查看到被占用PID后，再输入sudo kill -9 pid（pid换成上一步查看的数据）即可杀死进程

8、下载音频文件
这里需要注意，这种方法下载的是浏览器不能识别的文件，比如.aac音频。如果是能识别的.wav，则会打开新的窗口进行播放。
如果需要直接下载，就必需要指定文件名。

// 下载音频文件
    downloadAudio(filePath, fileName) {
      fetch(filePath)
        .then((res) => res.blob())
        .catch(() => {
          window.open(filePath, "target");
        })
        .then((blob) => {
          const a = document.createElement("a");
          document.body.appendChild(a);
          a.style.display = "none";
          // 使用获取到的blob对象创建的url
          const url = window.URL.createObjectURL(blob);
          a.href = url;
          // 指定下载的文件名，不指定就根据上传名直接下载
          a.download = fileName;
          a.click();
          document.body.removeChild(a);
          // 移除blob对象的url
          window.URL.revokeObjectURL(url);
        })
        .catch(() => {
          console.log("下载异常，请稍后重试");
        });
    },

9、tabbar 的设置，兼容iOS12以下

      display: flex;
      align-items: center;
      justify-content: space-around;   // space-evenly不兼容

H5知识点

推荐阅读更多精彩内容