1、让小喇叭上下居中
父元素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不兼容
