36-前端简答题

前端简答题

1. Linux中vim有几种模式？如何进行这几种模式的切换？

​ 命令行模式、插入模式、底行模式；

​ 命令行模式 -> 插入模式 I A O i a o

​ 命令行模式 -> 底行模式 ： ？

​ 插入模式 -> 命令行模式 esc

2. css3中animation与transition表达的意思？

​ animation表达动画：animation-xxx

• animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画；
• animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长
• animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度
• animation-delay 设置动画在启动前的延迟间隔。
• animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次
• animation-direction 指定是否应该轮流反向播放动画。
• animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
• animation-play-state 告诉系统当前动画是否需要暂停

​ transition表示过渡：transition-xxx

• transition-property 规定应用过渡的 CSS 属性的名称。
• transition-duration 定义过渡效果花费的时间。
• transition-delay 规定过渡效果何时开始。

3. css中verticle-align规则有什么作用？

​ 设置行内元素的垂直对齐方式。默认值baseline，即行内元素默认按照基线来进行排列。

4. 相对定位、绝对行为、固定定位、粘滞定位、静态定位有什么区别？

​ 脱离文档流的是：绝对定位、固定定位、粘滞定位

​ 没有定位属性与效果：静态定位

​ 参考点不同：

• ​ 相对定位： 相对于原来自己的位置
• ​ 绝对定位： 相对具有定位属性的上层元素
• ​ 固定定位： 相对浏览器窗口定位
• ​ 粘滞定位： 相对定位+固定定位组合，有临界值

5. 什么是响应式网页？如何实现一个响应式网页？

​ 响应式网页可以根据用户的访问设备不同而发生自适应变化。可以通过@media来进行媒体选择，不同的设备尺寸执行不同的css代码。也可以使用bootstrap第三方库来完成响应式布局。

6. Linux中远程登录命令、远程文件传输命令、查看Java进程命令分别是什么？举例说明。

​ ssh 用户名@ip

​ scp 本地文件路径 用户名@ip:远程文件路径 或者 ftp 用户名@ip

​ ps -ef | grep java

7. 什么是块元素？块元素有哪些特点？

​ 块元素常用于搭建页面框架，常见的块元素有：div

​ 特点：独占一行空间；高度由内容决定；可以指定宽高；块元素内允许嵌套其他块元素与行内元素 。

8. em与rem的区别？

​ em：相对于当前元素上的字体大小

​ rem：相对于html元素上声明的字体大小

9. 如何使用css绘制一个三角形？

​ 不给盒子元素设置宽高，给4个方向分别设置边框，但是颜色都为透明， 设置其中一个方向边框色，例如border-bottom，那么将绘制一个三角朝上的三角形。

#app { width: 0; height: 0; border: 100px solid transparent; border-bottom: 100px solid #ccc; }

10. 简述flex布局。

​ 伸缩盒布局用于解决块元素在x轴以及y轴上排列的问题

​ 伸缩盒容器规则：

​ display

​ flex-direction 决定主轴对方向 row column

​ flex-wrap 换行

​ flex-flow 是上面两个简写方式

​ justify-content 快元素在主轴上对排列方式

​ align-items 在交叉轴上如何对齐

​ 伸缩盒元素规则：

​ flex-grow放大 flex-shrink缩小flex-basis如何分配空白空间、flex 对前三个对缩写

11. js数组中哪些方法是在原值上进行的修改？哪些方法没有对原值进行修改？

​ 改变原数组：push()增加、 pop() 删除后面的、shift()删除前面的、 unshift() 前面增加的、splice()删除 两个参数第一个是删除的位置第二个是删除的长度、 sort()排序

​ 不改变原数组： concat() 、slice()、every()、some()、filter()、map()、forEach()

12. 请写出让元素垂直居中的多种布局方法？

• ​ 通过margin、padding挤压
• ​ 通过相对定位、绝对定位
• ​ 通过flex布局display:flex align-items:center