Vue
-
什么是MVVM？
-
mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
-
组件之间的传值？
-
Vue 双向绑定原理
-
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
-
虚拟 DOM 实现原理
-
Vue 中 key 值的作用？
-
Vue 的生命周期
-
Vue 组件间通信有哪些方式?
-
vue 中怎么重置 data?
-
组件中写 name 选项有什么作用？
-
Vue 的 nextTick 的原理是什么？
-
Vuex 有哪几种属性?
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
.wrapper {
width: 600px;
/* background: #ccc; */
margin: 200px 200px auto auto;
}
.main {
width: 100%;
/* margin: 0 auto; */
text-align: center;
}
.main img {
width: 200px;
border: 50px solid black;
border-radius: 50%;
}
效果：
4.接下来就是工具面板了
4.1先写一下结构，分为左中右三部分，分别是：播放/暂停，进度条，音量
4.2然后去iconfont下载对应图标，搜索播放、暂停、喇叭，寻找大小一致的，不需要后期调节大小的三个图标，加入购物车，然后点击“下载代码”，解压至想要的目录下
解压后打开文件夹，会看到里面有一个html文件，里面是使用教程
有三种方法可以使用下载的图标，此处用的是第二种：font class
第一步，是引入，注意引入的路径，在教程中，是引入当前路径下的iconfont.css文件
而我们的css文件统一是放在css文件夹下的，所以，我们把这个css文件拷贝过来，写对应的路径
教程的link：
我们的link：
第二步，将图标的类名按规范写在想要的位置
类名要写成：class=“iconfont icon-xxx”
教程示范：
我们写的是这样：
效果：
这样就引入了iconfont图标了，样式等会再调整
4.3把面板的背景设置一下
.tool {
width: 80%;
height: 60px;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
margin: 40px auto auto;
}
效果：
4.4设置左中右三块
4.4.1设置左边
可以看到，这个iconfont图标其实是文字，添加在图标类的before上，所以我们可以像使用文字一样地对它设置颜色，字号大小
给btn（里面包裹着播放图标）的父级tool设置相对定位，给btn设置绝对定位让btn相对tool往左30px，
.btn {
position: absolute;
width: 30px;
height: 30px;
left: 30px;
}
.btn span {
color: #fff;
font-size: 30px;
}
.tool > div {
top: 50%;
margin-top: -15px;
}
设置播放图标垂直居中：top: 50%; margin-top: -15px;(高度一半的负数)，因为top50%代表往下挪了容器高度的一半，此时图标与容器1/2高处平齐，这不是视觉上的居中，因此我们要再往上挪图标高度的1/2，才是垂直居中
关于垂直居中的图示如下，只看垂直方向的移动，平开来画是为了看起来方便，其实没有设置水平方向的位移：
效果：可以看到，播放图标已经垂直居中
4.4.2设置右边：
高度宽度也设置30px，字号，颜色也设置，因为刚刚已经设置.tool > div的垂直居中了，这个选择器筛选了.tool下一级的所有div，包括btn，process，volume，所以设置宽高30px之后，垂直居中就已经搞定了
.volume {
width: 30px;
height: 30px;
position: absolute;
right: 30px;
}
.volume span {
color: #fff;
font-size: 30px;
}
效果：
4.4.3设置中间的进度条
写一下进度条的结构，分成左中右三部分：
左边是当前播放时间
右边是总时长
中间进度条，有一个灰色固定宽度底边，一个白色随着时间边长的进度条，白色进度条右边还有一个小白点
给process设置一下样式
.process {
width: 320px;
height: 30px;
position: absolute;
left: 50%;
margin-left: -160px;
background: #333;
}
当前时间和总时长先都写00:00，之后再用js改
.current-time, .all-time {
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
font-weight: 200;
}
.current-time {
float: left;
}
.all-time {
float: right;
}
设置底下的黑色条
为了效果明显，把中间process设置成红色了
.pro-box {
width: 160px;
height: 30px;
display: inline-block;
position: relative;
}
.pro-bg {
总结
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
前端面试题汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript
性能
linux
扫一扫
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
