css部分(flex)*{保证金：0；填充：0；}body{background:#4c4c4curl('https://unsplash.it/1500/900?image=1021');/*覆盖整个容器*/background-size:cover;/*最小高度：100视口*/最小高度：100vh；显示：弹性；证明内容：居中；/*沿主轴（水平）对齐*/align-items:center;/*沿横轴对齐（Vertical）*/}.wrapper{/*第一种写法居中*//*position:absolute;顶部：50%；左：50%；转换：翻译（-50%，-50%）；*/宽度：850px；显示：弹性；}/*.flex{父容器设置灵活布局后，设置子容器占父容器宽度的比例，1为1flex:1;}*/.speed{背景颜色：#ffffff;/*父容器设置di张开：弯曲；当子容器设置flex:1;时，子容器会平分继承父容器的高度*/flex:1;/*父容器的宽度是固定的，子容器的margin会占用父容器的宽度，所以标签会变小*/margin:10px;边界半径：50px；/*文本对齐：居中；*/显示：弹性；对齐项目：弹性启动；溢出：隐藏；}.speed-bar{/*宽度：100%；*//*宽度：100%；和弹性：1；可互换*/flex:1;身高：16.3%；显示：弹性；证明内容：居中；对齐项目：居中；/*linearGradient:从-170deg的位置开始，从0%高度的#2376ae变为100%高度的#c16ecf*//*角度从0开始，从第三个参数的颜色变为第二个参数，正值顺时针，负值逆时针*/background:linear-gradient(-170deg,#2376ae0%,#c16ecf100%);颜色：#fff；游标：指针；}JavaScript部分/*1.获取要操作的对象dom结构2.在这个dom上移动鼠标可以控制滑块的位置3.可以控制这个dom的高度变化4.调整视频的播放速度根据dom高度的值*/varspeed=document.querySelector('.speed')varbar=document.querySelector('.speed-bar')varvideo=document.querySelector('.flex')/*registerevent*/speed.addEventListener('mousemove',function(event){//console.log(event);vary=event.pageY-speed.offsetTopvarpercent=y/speed.offsetHeight//获取dom结构本身的高度varmin=0.4varmax=4varheight=Math.round(percent*100)+'%'varplaybackRate=percent*(max-min)+min/*使表达式出现在0.4和4之间*///console.log(percent+'+'+playbackRate);bar.style.height=height/*playbackRate播放速度*/video.playbackRate=playbackRatebar.textContent=playbackRate.toFixed(2)+'x'})4.总结CSS部分元素水平和垂直居中（添加flex布局到父元素)body{/*最小高度:100个视口*/min-height:100vh;显示：弹性；justify-content:center;/*沿主轴对齐（水平）*/align-items:center;/*沿横轴对齐（垂直）*/}parentcontainersetdisplay:flex;子容器可以设置flex:1;flex取的数表示按比例平分父容器的宽度，例如1表示元素平分父容器的宽度/*parentcontainer*/.wrapper{width:850px;display:flex;}/*子容器*/.flex{flex:1;}align-items:flex-start;表示子元素的垂直对齐是沿横轴的顶部对齐。当父容器设置display:flex;而子容器只有一个元素，可以设置flex:1;或宽度：100%；占据父容器的所有宽度渐变用法：linear-gradient/*线性渐变：从-170deg的位置开始，从0%高度的#2376ae变为100%高度的#c16ecf*//*角度从0，从第三个参数的颜色变为第二个参数的颜色，正值顺时针，负值逆时针*/background:linear-gradient(-170deg,#2376ae0%,#c16ecf100%);JavaScript部分document.querySelector('classselector'):获取指定类选择器在dom中的标签addEventListener('event',method(eventparameter)):为指定标签变量添加事件监听方法，监听事件,并在事件发生时在方法中进行相应的操作pageY:指定事件中元素的y轴坐标offsetTop:元素到网页顶部的距离offsetHeight:元素本身的高度。style.height：设置元素样式的高度playbackRate：video标签中控制倍速播放的属性textContent：获取标签的内容