这篇博客整理了关于JavaScript和CSS的面试题目，涵盖了vim编辑器模式切换、CSS3的animation与transition、CSS的vertical-align、定位方式、响应式网页、Linux命令、块级元素特性、em与rem的区别、绘制三角形、flex布局、数组操作、CSS选择器优先级、伪元素::after的用途、Git命令、数据类型判断、面向对象继承、函数的this指向、深拷贝实现、闭包与内存管理、盒子模型和HTTP协议报文格式等多个知识点。
1、linux中 vim有几种模式？如何进行这几种模式的切换
- 命令行模式、插入模式、底行模式
- 命令行模式->插入模式 I A O i a o
- 命令行模式->底行模式 : ?
- 插入模式->命令行模式 esc
2、css3中animation与transition表示什么意思？
- animation动画 由@keyframes来描述每一帧的样式
- transition允许css的属性值在一定的时间区间内平滑地过渡
3、css中verticle-align规则有什么作用
- 设置行内元素的垂直对齐方式。
- 默认取值为baseline，即行内元素默认按照基线来进行排列
4、相对定位、绝对定位、固定定位、粘滞定位、静态定位有什么区别？
-
4.1.静态定位：默认定位方式，无定位的意思
-
4.2.相对定位： 相对于它原来的位置进行偏移，原来在标准流中的位置继续占有
-
4.3.绝对定位：相对于它祖先元素来说。如果没有祖先元素或者祖先元素没有定位，则以浏览器为准（document文档） 如果祖先元素有定位（相对，绝对，固定），则以最近一级的有定位的祖先元素为参考点移动位置 绝对定位不再占有原先的位置（脱标）
-
4.4.固定定位：页面滚动时元素的位置不会改变，是相对于浏览器的可视窗口； 跟父元素没有任何关系，不随滚动条滚动； 固定定位不占有原先的位置。
-
4.5粘滞定位：相对定位+固定定位组合。以浏览器可视窗口为参照点 占有原先的位置 必须添加top|bottom|left|right中的一个才生效
5、什么是响应式网页？如何实现一个响应式网页
- 所谓响应式布局，就是指同一个网页，在不同的终端上的显示效果不同，但是访问的确实是同一个页面，只是因为浏览器会根据终端的不同（例如屏幕宽度、横竖屏、移动端还是pc端等）选择的渲染方式也不同。
- 先做好PC端的样式，然后使用css中的@media媒体查询来适配不同的终端。这里有一个比较好的习惯是将页面栅格化，栅格化的意思就是将页面划分成一块一块的区域，然后不同的终端适配就是将栅格重新排列
6、linux中远程登录命令、远程文件传输命令、查看Java进程命令分别是什么？举例说明
- 远程登录命令：ssh 用户名@ip地址
- 远程文件传输命令：scp
-v 和大多数linux命令中的-v意思一样,用来显示进度,可以用来查看连接,认证,或是配置错误;
-C 使能压缩选项;
-4 强行使用IPV4地址;
-6 强行使用IPV6地址;
-P 选择端口,注意-p已经被rcp使用;-r 递归查找; - 查看Java进程命令:ps
-aux 以BSD风格显示进程 常用
-efH 以System V风格显示进程
-e , -A 显示所有进程 a 显示终端上所有用户的进程 x 显示无终端进程 u 显示详细信息 f 树状显示 w 完整显示信息 l 显示长列表
7、什么是块元素，块元素有哪些特点？
- 块元素常用于 搭建页面框架，常见的块元素：div
- 特点：
1.块级元素独占一行
2.块级元素较比行内元素可以设置宽高
3.块级元素可以包含块级，行内
8、em 与rem的区别？
- em为相对长度单位，表示当前元素上的字体大小
- rem为相对长度单位，表示根（html）元素上声明的字体大小
9、如何使用css绘制一个三角形？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.triangle {
width: 0px;
height: 0px;
border: 50px solid;
border-color: transparent transparent red transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
10、简述flex布局？
-
1、核心概念：主轴、交叉轴、伸缩盒容器、伸缩盒元素
-
2、常用规则：
2.1、伸缩盒容器相关规则：display、flex-direction、flex-wrap、align-items、 justify-content
2.2、伸缩盒元素相关规则： flex-basic、flex-growflex-shrinkflex连写 -
3使用技巧：
伸缩盒容器常用于列级布局，与浮动布局类似可以将多个块元素在一行中显示，伸缩盒更简单一些，只需要为容器盒子添加display:flex属性，这个容器盒子就变成了伸缩盒容器，其子元素伸缩盒元素就会沿着主轴来排列，默认主轴是x轴，可以通过flex-direction来改变主轴。
11、js数组中哪些方法是在原值上进行的修改？哪些方法没有对原值进行修改？
改变的：
- push()向数组的末尾添加一个或多个元素，并返回新的长度。
- pop()删除数组的最后一个元素并返回删除的元素。
- shift()把数组的第一个元素从其中删除，并返回第一个元素的值
- unshift()向数组的开头添加一个或更多元素，并返回新的长度。
- splice()向/从数组中添加/删除元素，然后返回被删除的元素。
- sort()对数组的元素进行排序。
- reverse()用于颠倒数组中元素的顺序。
没改变的：
- indexOf() 返回数组中某个指定的元素位置。
- lastIndexOf()返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。
- concat() 连接两个或多个数组。
- slice()从已有的数组中返回选定的元素。
- join()把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
- forEach（）调用数组的每个元素，并将元素传递给回调函数。
- every() 检测数组所有元素是否都符合指定条件（通过函数提供）。
- some() 检测数组中的元素是否满足指定条件（函数提供）。
- filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
- map() 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
12、请写出让元素垂直居中的多种布局方法？
- 1.通过外边距调整，根据父子元素的宽高来计算外边距的值。（父子都是块级元素） 注意：如果两个盒子是嵌套关系, 有时候设置了里面一个盒子(子元素)顶部的外边距, 外面一个盒子(父元素)也会被顶下来。
- 2.给父元素设置绝对定位，子元素设置相对定位（子绝父相），然后给子元素设置top:0、bottom:0、left:0,right:0,margin:auto
水平方向居中：margin：0 auto - 3.给父元素设置绝对定位，子元素设置相对定位（子绝父相），然后给子元素设置top:50%、margin-top：-元素高度的一半；
- 4.把父元素声明为伸缩盒布局，即display:flex；然后给父元素设置 align-items: center;
13、简述css3选择器的优先级机制？
- 行内样式，style属性内的特性值1000
- id选择器特性值100
- 类选择器、伪类选择器、属性选择器特性值10
- 标签选择器、伪元素选择器特性值1
- 其他选择器* 空格 + > 特性值0
- 计算方式如下：比如遇见一个类选择器，则选择器的特性值加10，最终计算出整个CSS选择器的特性值。如果css属性有!important则优先级最高。
14、伪元素选择器::after有哪些常见用法？
- 1.清除浮动
- 2.用于向选定的元素内容之后插入元素
- 3.Float：居中
- 4.做出各种图形效果
- 5.超链接特效
15、写出几个你熟悉的 Git 命令？
- 1.在本地初始化一个Git仓库：git init
- 2.从远程仓库克隆：git clone 远程Git仓库地址
- 3.查看文件状态：git status
- 4.将暂存区的文件修改提交到本地仓库：git commit
- 5.从远程仓库中获取最新版本并下载到本地仓库：git pull
- 6.推送到远程仓库：git push
16、在js中如何判断一个数据类型？
1.使用typeof
- typeof(1) typeof(NaN) 返回number typeof(true)
- typeof(false) 返回boolean
- typeof(’ ') 返回string
- typeof(function fun(){}) 返回function
- typeof(undefined) 返回undefined
- typeof(null)和new出来的实例返回值都是 object
** 2.Instanceof**
instanceof用来判断A是否为B的实例，表达式为：A instanceof B，如果A是B的实例，则返回true，否则返回false。instanceof检测的是原型，内部机制是通过判断对象的原型链中是否有类型的原型。
3.Array.isArray()
通过Array.isArray()来判断引用数据类型是对象还是数组
4.isNaN()、isInfinite()
通过isNaN()、isInfinite()来判断一个数字是否非数值类型，无穷数
17、在js的面向对象中继承方式有哪几种，分别进行描述？
- 1.原型链继承：将父类的实例作为子类的原型
- 2.构造继承：借用构造函数的基本思想就是利用call或apply把父类中通过this制定的属性和方法服用到子类创建的实例中。
- 3.组合继承：所有的实例都能够拥有自己的属性，并且可以使用相同的方法，组合继承避免了原型链和借用构造函数的缺陷，结合了两个优点，是最常用的的继承。
18、简述js函数的this指向问题？
- 1、以函数形式调用this永远是window
- 2、以方法的形式调用，this是该方法的对象
- 3、以构造函数形式调用new，this是新创建的实例（使用构造函数创建的对象，称为该类的实例）
19、如何实现一个对象的深拷贝？
常用的深拷贝实现方法
- 1.lodash.cloneDeep()
- 2.递归
- 3.Json.stringify和Json.parse
- 4.Object.assign()
20、什么是闭包？如何解决闭包打来的内存泄露问题？
- 闭包是指有权访问另外一个函数作用域中的变量的函数。可以理解为(能够读取另一个函数作用域的变量的函数)
- 如何避免闭包引起的内存泄漏
1.在退出函数之前，将不使用的局部变量全部删除。可以使变量赋值为null;
2.避免变量的循环赋值和引用。
3.利用Jquery释放自身指定的所有事件处理程序。
20、盒子模型种类及主要区别?
- CSS盒子模型分为W3C标准盒子(内容盒子)模型和IE盒子(边框盒子)模型。
- 盒子模型是由内容区、padding区、border区、margin区组成。
- 盒子模型相互转换使用box-sizing属性，属性值content-box代表W3C标准盒子模型，即设置的宽高是内容区的宽高，属性值border-box代表IE盒子模型，即设置的宽高是盒子的宽高。
21、简述http协议的报文格式
- 请求报文：浏览器会将前端请求封装成请求报文发送给后端，请求报文中包含请求行、请求头、请求体
- 响应报文：服务器接收到前端发来的请求，会将响应内容封装成为一个响应报文，浏览器会对响应报文进行解析，进而显示出来。响应报文中包含响应行、响应头、响应体。
23、用递归的方法实现1到100求和。
function sum(n){
if(n == 1)
return 1;
return sum(n-1) + n
}
let result= sum(100)
console.log(result,"求和结果");
24、统计一个字符串中字符出现一次的字符，例如：输入 hello,l 输出 2
var str = 'hello'
function sort(str,n){
var num = 0
for(var i =0;i<str.length;i++){
if(str[i] == n)
num++;
}
return num;
}
console.log(sort('hello','l'));
25、编写代码实现数组扁平化输出，例如：输入[[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]
var arr=[[1,2,3,[4,5,6,[7,8]]],[9,10],[11,12,[13]],5];
方法一：var brr = arr.toString().split(‘,’)
console.log(arr);
方法二： console.log(arr.flat(Infinity))
// 输出为[1,2,3,4,5,6,7,8,9,10,11,12,13,5]
26、使用任意一种排序算法对数组进行排序，例如：输入[3,2,1,6,12,8,9] 输出：[1,2,3,6,8,9,12]
//冒泡排序
for(var i = 0; i < arr.length - 1; i++){
for(var j = 0; j < arr.length - i - 1; j++){
if(arr[j] > arr[j + 1]){
var tmp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = tmp;
}
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
