前端笔面试题总结(2)

1、linux中 vim有几种模式?如何进行这几种模式的切换?

     (1)vim有三种模式,分别为命令模式输入模式底行模式

在输入模式有四种类型的命令,它们分别代表的含义不同:
      ①i/I i是从光标所在位置开始输入 ;
         I是光标所在行的第一个非空白字符开始输入;
      ②a/A a是从光标所在的下一个字符开始输入;
         A是从光标所在行的最后一个字符开始输入;
      ③o/O o是从光标所在行的下一行新的一行开始输入;
         O是从光标所在行的上一行新的一行开始输入;
      ④r/R r是取代光标所在的字符;R是一次取代光标所在字符 对于底行命令模式的命令有:
         :w 保存    :q退出;    :wq保存并退出;      :q!不保存强制退出;
         :set nu 显示行号       :set nonu 隐藏行号; :wq!强制保存并退出;

     (2)三种模式间的切换

命令模式到插入模式:i、a、o、I、A、O
插入模式到命令模式:Esc
命令模式到底行模式:: (冒号)

2、css3中animationtransition表示什么意思?

     (1)animation表示动画属性,强调流程与控制,对元素的一个或多个属性的变化进行控制,同时可以有多个关键帧,通过Keyframes关键帧的玩意来控制。总而言之,它由两部分组成:动画的配置以及一系列的@keyframes。其主要配置有下几种:

	animation-name:  动画名称
    animation-duration:动画持续的时间
    animation-timing-function:速度曲线
    animation-delay:延迟时间
    animation-iteration-count:动画迭代的次数
    animation-direction:动画的方向
    animation-play-state:动画的状态
    animation-fill-mode:动画的填充模式

     (2)transition表示过渡属性,它允许css属性值在一定时间和区间内平滑过渡。其主要配置有下几种:

	transition-property(规定过渡效果的css属性名称)
	transition-duration(规定完后过渡效果需多少秒或毫秒)
	transition-timing-function(指定过渡函数,规定速度效果的速度曲线)
	transition-delay(指定开始出现的延迟时间)
3、css中verticle-align规则有什么作用?

     设置元素垂直对齐的方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。 这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

4、相对定位、局对定位、固定定位、粘滞定位、静态定位有什么区别

5、什么是响应式网页?如何实现一个响应式网页

1.响应式布局:
      能够根据设备的大小和型号等不同来变换实现更加适合用户设备需要的页面布局等其他自适应式需求。
2.实现方法:
      (1)如果是通过css原生代码,可以通过@media来进行媒体查询,当网页显示在不同的网页中加载执行不同的css代码;
      (2)如果是通过框架,例如bs,可以使用bs提供的响应式框架完成页面布局。

  //使用@media媒体查询的具体操作  
	@media mediatype and|not|only (media feature) {
		CSS-Code;
	}
	应用:
	@media  screen and (max-width: 500px) {
	    .gridmenu {
			width:100%;
	    }
	    .gridmain {
			width:100%;
	    }
	    .gridright {
			width:100%;
	    }
	}
6、linux中远程登录命令、远程文件传输命令、查看Java进程命令分别是什么?举例说明

(1)远程登录命令:       ssh root@ip
(2)远程文件传输命令:scp 文件路径 root@ip:远程终端文件路径
(3)拷贝远程文件命令:scp root@ip:远程终端文件路径 拷贝到的本地文件路径
(4)查看Java进程命令:ps -ef | grep java

7、什么是块元素,块元素有哪些特点?

(1)块级元素可以独占一行。
(2)块级元素可以直接设置宽高。
(3)块级元素中可以嵌套块级元素和行内元素。
扩展:块元素和行内元素区别https://blog.csdn.net/hey_myx/article/details/119938866

8、em 与rem的区别?

      (1)em表示字体大小的相对单位,它是相对于浏览器设定的默认字体大小来改变的,如果设置的默认字体大小为16px,则1em=16px;如果设置的默认字体大小为20px,则1em=20px,em的值并不是固定的,它会继承父级元素的字体大小。
      (2)rem表示字体大小的相对单位,它是一个固定值,表示默认基础字体大小的尺寸,继承的字体将不起作用,即1rem=16px,它相对的是一个HTML根元素;

9、如何使用css绘制一个三角形?
	<title>三角形</title>
	  <style>
		    #app {
		      width: 1px;
		      height: 1px;
		      border: 100px solid transparent;
		      border-top: 100px solid #9dd3a8;   /*倒三角*/
		      border-left: 100px solid yellow;/*左三角*/
		      border-right: 100px solid pink;/*右三角*/
		      border-bottom: 100px solid #d9d9f3;/*正三角*/
		    }
	   </style>
	</head>
	<body>
	   <div id="app"></div>
	</body>
10、简述flex布局?

(1)flex布局也称伸缩盒布局,为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。

   .box{
	   display: flex;
	   display: inline-flex;  //行内元素使用flex布局
	   display: -webkit-flex;//对于Webkit内核的浏览器,必须加上-webkit前缀。
    }
  注意:设为flex布局后,子元素的float、clear和vertical-align属性将失效。
11、js数组中哪些方法是在原值上进行的修改?哪些方法没有对原值进行修改?

     (1)对原值进行修改的方法有:push()、pop()、shift()、unshift()、sort()、reverse()
     (2)对原值不进行修改的方法有:isArray()、concat()、slice()、splice()、every()、indexOf()、lastIndexOf()、some()、filter()、map()、forEach()、
详细可以查看https://blog.csdn.net/hey_myx/article/details/120107698,这里面有对每个方法的详细介绍以及区别等。【推荐看☆】

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 命令?
   git clone     克隆
   git init      初始化
   git add       添加至暂存区
   git push origin master 将文件给推到服务器上 
   git status  查看当前状态
   git commit -m "remove" 移除文件(从Git中删除)
   git pull   本地与服务器端同步
   git fetch  相当于是从远程获取最新版本到本地,不会自动merge
   git clean  清除工作区未跟踪文件
   git commit 提交
   git mv     重命名
   git push   推送至远程版本库
   git rm     删除文件
16、在js中如何判断一个数据类型?

  (1)typeof ,typeof返回一个字符串,表示未经计算的操作数的类型。
  (2)instanceof 数据类型,instanceof运算符用于检测constructor.prototype是否存在于参数object的原型链上,当typeof无法分辨是null还是object时,就可以用这个方法。比如:
          object instanceof constructor
          object: 要检测的对象
          constructor: 某个构造函数
  (3).toString,通过结合使用call、apply来判断变量的数据类型。
  (4)全等‘===’用来判断数据类型是否相等,从而来判断数据类型。
  (5).isArray()用来检测是否为数组类型。

17、在js的面向对象中继承方式有哪几种,分别进行描述?

详情【5.对象的创建】:https://blog.csdn.net/hey_myx/article/details/120061642

18、简述js函数的this指向问题?

this,谁调用指向谁,单独使用this是全局
  (1)this在全局中单独使用,在浏览器中指向window;在node环境中指向global;
  (2)this在函数中使用,指向该函数的所属者。
  (3)this在事件中使用,指向了接收事件的HTML元素。

19、如何实现一个对象的深拷贝?

参考:https://www.cnblogs.com/echolun/p/7889848.html

20、什么是闭包?如何解决闭包打来的内存泄露问题?

1.闭包:函数内包含函数。
2.解决闭包的内存泄漏问题:立即执行函数IIFE
    立即执行函数的特点:
         页面加载完成后只执行一次的设置函数,并且立马执行,执行完后立即销毁。
         将设置函数中的变量包裹在局部作用域中,不会泄露成全局变量。
详情可参考:https://blog.csdn.net/hey_myx/article/details/119939609

21、盒子模型种类及主要区别?

1.W3C盒子,也称内存盒子、默认盒子。
   特点:width和height就是表示内容区的宽高;
2.IE盒子,也称边框盒子、怪异盒子。
   特点:width和height表示的是内容区的宽高,加上内边距的宽高,加上盒子边框的高度;

22、简述http协议的报文格式

(1)请求报文格式:HTTP的请求报文由四部分组成:请求行(requestline)、请求头部(header)、空行和请求数据(request data)
(2)响应报文格式:HTTP的响应报文由四部分组成:状态行、响应头、空行、响应体(数据)

23、用递归的方法实现1到100求和。
	function add(num, start) {
	    num += start;
	    start++;
	    if (start > 100) {
	        console.log(num);
	        return num;
	    }
	    else {
	        add(num, start);
	    }
	}
	add(0, 1);
24、编写代码实现数组扁平化输出,例如:输入[[1,2,3,[4,5,6,[7,8]]],[9,10],[11,12,[13]],5] 输出为[1,2,3,4,5,6,7,8,9,10,11,12,13,5]
    function flatten(arr) {
      let res = [];
      arr.map((item) => {
        if (Array.isArray(item)) {
          res = res.concat(flatten(item));
        } else {
          res.push(item);
        }
      })
      return res;
    }
    const arr = [[1,2,3,[4,5,6,[7,8]]],[9,10],[11,12,[13]],5];
    const arr1 = flatten(arr);
    console.log(arr1);
25、使用任意一种排序算法对数组进行排序,例如:输入[3,2,1,6,12,8,9] 输出:[1,2,3,6,8,9,12]
	var arr=[3,2,1,6,12,8,9];
	function compare(v1,v2){
		return v1-v2;
	}
	arr.sort(compare);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值