前端部分试题总结

1、linux中 vim有几种模式?如何进行这几种模式的切换
    (1)Linux中vim有三种模式,分别是:命令模式(Command mode)、插入模式(Entry mode)和底行模式(Last-line mode)。
    (2)三种模式间的切换:
    命令模式到插入模式:i、a、o、I、A、O
    插入模式到命令模式:ESC
    命令模式到底行模式:‘:’
    底行模式到命令模式:backspace
2、css3中animation与transition表示什么意思?
    (1)CSS3中animation表示动画属性,它由两部分组成:动画的配置以及一系列的@keyframes。动画的配置主要包含八种配置:
    animation-name:动画名称
    animation-duration:动画持续的时间
    animation-timing-function:速度曲线
    animation-delay:延迟时间
    animation-iteration-count:动画迭代的次数
    animation-direction:动画的方向
    animation-play-state:动画的状态
    animation-fill-mode:动画的填充模式
    (2)CSS3中transition表示过渡属性,提供了一种在更改CSS属性时控制动画速度的方法。主要包含四种配置:
    transition-property:可以使用过渡属性的元素
    transition-delay:过渡延迟的时间
    transition-timing-function:过渡的速度曲线
    transition-duration:过渡持续的时间
3、css中verticle-align规则有什么作用
    作用:设置元素垂直对齐的方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。
    这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
4、相对定位、绝对定位、固定定位、粘滞定位、静态定位有什么区别?
    (1)相对定位 position:relative:是不脱离文档流的定位模式,与静态定位相似,可以通过设置top、right、bottom、left值来改变元素的位置。
    (2)绝对定位 position:absolute:是脱离文档流的定位模式,在祖先元素中没有设置定位的属性,就相对于浏览器的视口区来改变元素的位置;若父元
    素有设置定位,则相对于父元素通过设置top、right、bottom、left值来改变元素的位置。
    (3)固定定位 position:fixed:是脱离文档流的定位模式,相对于浏览器的视口区固定,可以设置top、right、bottom、left属性。
    (4)粘滞定位 position:sticky:是不脱离文档流的定位模式,是结合相对定位和固定定位两种定位模式为一体的一种特殊定位模式。
    (5)静态定位 position:static:是不脱离文档流的定位模式,是所有元素的默认定位方式。
5、什么是响应式网页?如何实现一个响应式网页
    (1)响应式布局就是能够根据设备的大小和型号等不同来变换实现更加适合用户设备需要的页面布局等其他自适应式需求。
    (2)实现方法:
第一种方法:使用mate标签定义
如: 通过快捷方式打开时全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
第二种方式:通过css中的媒体查询@media来实现
如:
@media screen and (max-width: 768px) {
        body > button:first-child {
          display: block;
        }
        ul li {
          display: block;
        }
      }
6、linux中远程登录命令、远程文件传输命令、查看Java进程命令分别是什么?举例说明
    (1)远程登录命令:ssh root@ip
    (2)远程文件传输命令:scp 文件路径 root@ip:远程终端文件路径
    (3)拷贝远程文件命令:scp root@ip:远程终端文件路径 拷贝到的本地文件路径
    (4)查看Java进程命令:ps -ef | grep java
7、什么是块元素,块元素有哪些特点?
    (1)块级元素独占一行,宽度默认为100%。
    (2)块级元素的高度由内容决定,可以直接修改块级元素的宽高。
    (3)块级元素中可以嵌套块级元素和行内元素。
8、em 与rem的区别?
    (1)em表示字体大小的相对单位,它是相对于浏览器设定的默认字体大小来改变的,如果设置的默认字体大小为16px,则1em=16px;
    如果设置的默认字体大小为20px,则1em=20px;
    (2)rem表示字体大小的相对单位,它是一个固定值,表示默认基础字体大小的尺寸,继承的字体将不起作用,即1rem=16px;
9、如何使用css绘制一个三角形?
    (1)思路:通过设置一个div,给div的宽高设置为0,对div的border设置适当的边框,颜色为透明色;再设置border-bottom为
    同样的宽度,并且设置实线和颜色。
    (2)代码:
    <style>
      .app {
        width: 0px;
        height: 0px;
        border: 100px solid transparent;
        border-bottom: 100px solid darkorange;
        border-top: 100px solid darkgrey;
      }
    </style>
  </head>
  <body>
    <div class="app"></div>
  </body>

实现结果:

     (3)原理:盒子的边框在浏览器中显示的并非是四个矩形形成的一个边框,正确来说是四个梯形形成的边框。
10、简述flex布局?
    (1)flex布局叫做伸缩盒布局,是一种当页面需要适应不同的屏幕大 小以及设备类型时确保元素拥有恰当的行为的布局方式。
    (2)flex布局的中主要分为容器和元素,容器是指设置了伸缩盒布局的父元素,元素是指包含在伸缩盒布局中子元素。
    伸缩盒布局中,对容器主要设置的属性有:
    flex-direction:设定主轴的方向;
    flex-wrap:设置是否换行
    flex-flow:row,wrap;速写
    对元素主要设置的属性有:
    flex-grow:拉伸时的比例
    flex-shrink:压缩时的比例
    flex-basis:最小的宽度值
    flex:1 2 200px;速写
    (3)flex布局中对元素的区分:flex-direction设置的方向为主轴,另一条轴为交叉轴;默认x轴为主轴。
    主轴设置居中的属性为:justify-content
    交叉轴设置垂直居中的属性为:align-items
11、js数组中哪些方法是在原值上进行的修改?哪些方法没有对原值进行修改?
    (1)对原值进行修改的方法有:push()、pop()、shift()、unshift()、sort()、reverse()
    (2)对原值不进行修改的方法有:Array.isArray()、concat()、slice()、splice()、indexOf()、lastIndexOf()、every()、some()、filter()、map()
12、请写出让元素垂直居中的多种布局方法?
    (1)设置文本垂直居中的方式:
    1、单行文本设置行高等于文本的高度。
    2、多行文本设置padding值一样即可。
    (2)设置盒子垂直居中的方式:
    1、通过设置margin,设定top、left的值来设置盒子的垂直居中。
    2、设置父元素相对定位+子元素绝对定位,设置left、top为50%,再通过调整margin-top、margin-left来实现盒子的垂直居中。
    3、设置父元素相对定位+子元素绝对定位,设置left、top、right、bottom为0,margin:auto;来实现盒子的垂直居中。
    4、通过设置父元素display:flex;属性,子元素中设置justify-content:center;和align-items:center;
13、简述css3选择器的优先级机制?
    CSS中优先级问题主要通过三种机制来设置优先级的大小:Importance,Specificity,Source order。
    (1)!important,重要性,用来设定优先级的最高等级,可以优于其他选择器先被读取。
    (2)Specificity,特性值,通过设置不同大小的特性值,来设定选择器优先级的大小。
    选择器优先级排序:id选择器>class选择器>元素选择器
    (3)Source order,代码顺序,如果多个选择器具有相同的特性值和重要性,则采取就近原则来执行选择器中的样式。
14、伪元素选择器::after有哪些常见用法?
    (1)通过在受浮动影响的父元素中设置::after,清除浮动。
    具体代码:
    div::after{
        content:'';
        display:block;
        clear:both;
    }
    (2)实现二级标题的文字拼接。
    (3)实现对超链接做出特效。
    (4)实现插入图片和图标等效果。
15、写出几个你熟悉的 Git 命令?
    (1)git init 建立远程仓库与本地仓库的链接
    (2)git add 添加要提交的内容
    (3)git commit -m '提示信息'
    (4)git push 提交文件到远程git仓库
    (5)git status 查看当前git仓库的状态
    (6)git clone 仓库地址 克隆别人远程仓库的内容
    (7)git pull 拉取别人远程仓库的内容
16、在js中如何判断一个数据类型?
    (1)typeof 变量名,typeof返回一个字符串,表示未经计算的操作数的类型。
    (2)变量名 instanceof 数据类型,instanceof运算符用于检测实例对象(参数)的原型链上是否出现构造函数的prototype。
    (3)Object.prototype.toString(变量值),通过结合使用call、apply来判断变量的数据类型。
    (4)通过全等‘===’来判断数据类型是否相等,从而来判断数据类型。
    (5)在数组中,通过Array.isArray()来判断数据类型。
17、在js的面向对象中继承方式有哪几种,分别进行描述?
    (1)原型链继承:任何一个对象都会有一个原型,通过prototype去指向。而任何一个实例都有一个__proto__去指向所属的对象原型
    ,当这个实例的方法找不到时,就会通过原型链去寻找它的父类原型中的方法,这便是原型链继承。
    (2)经典继承:也称借用构造函数,通过在子类构造函数的内部调用超类型构造函数,使用apply()和call() 方法来实现。
    (3)组合继承(原型链继承+经典继承):使用原型链实现对原型属性和方法的继承,而通过借用构造函数实现对实例属性的继承。
18、简述js函数的this指向问题?
    (1)this在全局中单独使用,在浏览器中指向window;在node环境中指向global;
    (2)this在函数中使用,指向该函数的所属者。
    (3)this在事件中使用,指向了接收事件的HTML元素。
19、如何实现一个对象的深拷贝?
    (1)转换js对象转成字符串对象的JSON.stringify方法;
    (2)将js字符串对象转换成js对象的JSON.parse方法;
    (3)采用递归去拷贝所有层级属性
    (4)通过jQuery的extend方法实现深拷贝
    (5)lodash函数库实现深拷贝
    (6)Reflect法
    (7)如果对象的value是基本类型的话,也可以用Object.assign来实现深拷贝,但是要把它赋值给一个空对象
    (8)用slice实现对数组的深拷贝
    (9)用concat实现对数组的深拷贝
    (10)直接使用var newObj = Object.create(oldObj),可以达到深拷贝的效果。
    (11)使用扩展运算符实现深拷贝
20、什么是闭包?如何解决闭包打来的内存泄露问题?
    (1)闭包:通过在一个函数中嵌套另一个函数,实现函数内部变量的互相访问。但是由于作用域链得不到释放,会增大内存的消耗,造成内存泄漏。
    (2)解决方法:
    1、在函数执行完之后,被引用的私有变量不能被销毁,会增大内存消耗,造成内存泄漏。可以通过直接设置变量的值为null,来销毁变量
    占据的内存,从而释放内存。
    2、通过使用立即执行函数(IIFE)来解决内存泄露的问题。
21、盒子模型种类及主要区别?
    (1)W3C盒子,也称内存盒子、默认盒子。它主要的特点是,width和height就是表示内容区的宽高;
    (2)IE盒子,也称边框盒子、怪异盒子。它主要的特点是,width和height表示的是内容区的宽高,加上内边距的宽高,加上盒子边框的高度;
22、简述http协议的报文格式
    (1)请求报文格式:HTTP的请求报文由四部分组成:请求行(request line)、请求头部(header)、空行和请求数据(request data)
    (2)响应报文格式:HTTP的响应报文由四部分组成:状态行、响应头、空行、响应体(数据)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值