前端笔面试题总结(2)

2023-10-29

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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端笔面试题总结(2) 的相关文章

随机推荐

  • Failed to load resource: the server responded with a status of 500 ()

    文章目录 前提 解决思路 心得 前提 1 最近在写SSM博客项目 基于jsp编写的 跟着视频敲 直接运行已经给好的资料 在登录验证的时候 发现页面加载半天 如下图 2 于是就盲目的去比对是不是自己复制的代码有问题 然后就一行行的比对 这犯了
  • Linux中磁盘分区的具体步骤

    磁盘分区是在Linux操作系统中重要的任务之一 通过分区可以让我们更好地管理磁盘空间 并更好地使用磁盘来存储数据和程序 在这篇博客里 我将向大家介绍如何在Linux中进行磁盘分区的实战步骤 步骤一 打开终端 首先 我们需要打开终端 在终端中
  • Linux系统巡检项及详细巡检方法与解决方案

    一 背景 1 开发脚本实现OS配置参数巡检 2 推动监控系统发布OS巡检插件 3 利用监控数据形成报表 二 巡检项整改方案解析 1 检查僵尸进程 此项检查项是检查主机系统是否存在D状态的进程 D是一种不可中断的sleep 如果发现D状态并且
  • [React Hooks 翻译] 3-8 State Hook

    示例 等价的class组件 使用class实现一个计数器 你可能会这么写 class Example extends React Component constructor props super props this state coun
  • 微信公众号 几种移动端UI框架介绍

    微信公众号 几种移动端UI框架介绍 微信公众号开发 主要是移动端网页的页面开发 在这里推荐3个移动端UI框架 WeUI SUI和Mint UI 1 WeUI 1 1 WeUI WeUI是微信官方设计团队为微信 Web 开发量身设计 可以令用
  • 从RecyclerView、NestedScrollView源码分析嵌套滑动异常

    一 显示不全 自动滚动异常 NestedScrollView嵌套RecyclerView时 有2个问题 1 RecyclerView数据加载完成后 会自动滚动到第一个itemView的位置上 导致RecyclerView上面的布局不显示 2
  • 处理 Java 异常时应避免的 7 个常见错误

    处理异常是最常见但不一定是最简单的任务之一 它仍然是经验丰富的团队中经常讨论的话题之一 并且我们应该了解一些最佳实践和常见错误 以下是在处理应用程序中的异常时应避免的几个错误 错误 1 指定一个 java lang Exception 或
  • uwb定位上位机定位源码流程分析

    主要用到的文件有两个 1 SerialConnection cpp 负责串口初始化相关内容 2 RTLSClient cpp 负责解算标签坐标并发送给上位机 3 trilateration cpp 解算坐标数学原理 1 先执行 函数 voi
  • 斐波那契额数列

    斐波那契额数列 文章目录 斐波那契额数列 前言 一 迭代法 二 公式法估算 三 矩阵快速幂加高精度 完 前言 采用三种方法求斐波那契数列 迭代法 公式法 矩阵快速幂加高精度 偷偷告诉你 可以精确求到一万位斐波那契数 一 迭代法 includ
  • 网络剪枝(1)

    论文名 Learning Efficient Convolutional Networks through Network Slimming 本文主题 Network Slimming 1 剪枝的三种意义 re duce the model
  • 串口通信----串口接收框接收不到数据

    在进行串口调试时 数据发送没有问题 但是其他串口给该串口发送数据时 接收框始终接收不到数据 也不提示错误 感觉接收函数不起作用 对照之前没有问题的串口程序 发现只有这部分没有添加进去 其他都是一样的 问题应该在这里 添加进去后 正常接收了
  • 面试官提问js篇3:js中 0.1 + 0.2 为什么不等于0.3?怎么才能等于0.3?

    一 js中 0 1 0 2 为什么不等于0 3 因为浮点数运算的精度问题 在计算机运行过程中 需要将数据转化成二进制 然后再进行计算 js中的Number类型遵循IEEE754标准 在IEEE754标准的64位浮点数相加 因为浮点数自身小数
  • RocketMq的控制台安装以及RocketMqTemplate的使用

    跟别的mq一样 RocketMq也有自己的控制台 本章讲解控制台的安装以及在实际开发中RocketMq的使用 1 RocketMq控制台安装 首先进入github中RocketMq控制台的源码中 添加链接描述 将其下载下来 如图 可以直接通
  • 什么是服务器虚拟化?

    虚拟化就解决了这个问题 将多台服务器整合到一台服务器中 运行多个虚拟环境 最终将节省物理空间 另一个问题就是 计算机网络变得越来越大 同时也越来越复杂 服务器会占用宝贵的空间 这叶就是为何数据中心会为散热而烦恼 若将一个服物理务器划分多个虚
  • springboot多模块项目(微服务项目)正确打包(jar)方式

    大致步骤 新建一个springboot项目名称为父亲 添加父快捷方式 新建子模块 子模块同时插入新建springboot的项目 依次创建enty和web模块 关键是并配置好pom文件 web模块依赖于entiy模块中的实体类 创建测试控制器
  • invalid sender 或出现Invalid JSON RPC response: {“size“:0,“timeout“:0}

    web3发交易经常出现invalid sender 或者Invalid JSON RPC response size 0 timeout 0 报错 这个报错很不具体 云里雾里 经过我的反复测试 这是和web3相关的包版本有关 以web3 j
  • Linux系统如何使用命令创建文件?

    在Linux系统中 文件是我们日常工作中会经常接触到的一部分 不管是编写代码 存储数据还是记录日志 都需要创建文件来进行操作 那么在Linux系统中 如何使用命令创建文件呢 以下是详细的内容 1 创建空白文件 要在Linux系统中创建空白文
  • Echarts图例位置 - legend属性

    legend orient vertical x right 可设定图例在左 右 居中 y center 可设定图例在上 下 居中 padding 0 50 0 0 可设定图例 距上方距离 距右方距离 距下方距离 距左方距离 data 直接
  • 计算机网络-3-局域网数据链路层原理与技术

    03 局域网数据链路层原理与技术 1 数据链路层概述 本章主要是局域网的数据链路层的技术标准 主要是以太网的介质和无线网的介质两大类 是一个直连线路上的介质控制 在无线路由器上 会有不同的第二层 手机到路由器 路由器到远端 数据链路层只能在
  • 前端笔面试题总结(2)

    1 linux中 vim有几种模式 如何进行这几种模式的切换 1 vim有三种模式 分别为命令模式 输入模式和底行模式 在输入模式有四种类型的命令 它们分别代表的含义不同 i I i是从光标所在位置开始输入 I是光标所在行的第一个非空白字符