1、讓小喇叭上下居中

WechatIMG24.png

父元素display: flex; align-item: center;
或者給喇叭設(shè)置：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類的元素前面和后面插入指定內(nèi)容

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
在相對定位中，定位元素是根據(jù)自己原本所在位置進行定位，相對定位不會脫離文檔流，在文檔流中不會影響其他元素，偏移量根據(jù)給定的值，值可以為負數(shù)；

• top 數(shù)值越大越往下 頂部與原位置差
• bottom 數(shù)值越大越往上 底部與原位置差
• left 數(shù)值越大越往右 左邊與原位置差
• ight 數(shù)值越大越往左 右邊與原位置差
  特點 占原位置，在文檔流中占位置。

（2）絕對定位 ：position:absolute
絕對定位中，定位依據(jù)是定位元素的父級，直到找到body元素，絕對定位的元素會脫離文檔流，行內(nèi)可以設(shè)置寬高，塊元素不獨占一行，由內(nèi)容撐開寬高；

*top 數(shù)值越大越往下 頂部與定位父級的頂部之差
*bottom 數(shù)值越大越往上 底部與定位父級的底部之差
*left 數(shù)值越大越往右 左邊與定位父級的左邊之差
*right 數(shù)值越大越往左 右邊與定位父級的右邊之差
特點 脫離文檔流

（3）固定定位：position:fixed
根據(jù)瀏覽器窗口的位置和大小進行定位，元素的位置在屏幕內(nèi)容滾動時不會改變位置，固定定位的元素會移出文檔流；

*top 根據(jù)窗口的上邊進行定位
*bottom 根據(jù)窗口的下邊進行定位
*left 根據(jù)窗口的左邊進行定位
*right 根據(jù)窗口的右邊進行定位

6、本地配置localhost

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

7、偶然發(fā)現(xiàn)關(guān)閉node服務(wù)之后，再起啟動，一直啟動不了，提示端口占用
Error: listen EADDRINUSE: address already in use :::3333
解決辦法：
終端輸入 sudo lsof -i:端口號（端口號換成你的），查看到被占用PID后，再輸入sudo kill -9 pid（pid換成上一步查看的數(shù)據(jù)）即可殺死進程

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對象創(chuàng)建的url
          const url = window.URL.createObjectURL(blob);
          a.href = url;
          // 指定下載的文件名，不指定就根據(jù)上傳名直接下載
          a.download = fileName;
          a.click();
          document.body.removeChild(a);
          // 移除blob對象的url
          window.URL.revokeObjectURL(url);
        })
        .catch(() => {
          console.log("下載異常，請稍后重試");
        });
    },

9、tabbar 的設(shè)置，兼容iOS12以下

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