web前端面试总结(自认为还算全面哈哈哈哈哈！！！）

最新推荐文章于 2023-08-02 15:06:09 发布

Zwx886

最新推荐文章于 2023-08-02 15:06:09 发布

阅读量2.9k

点赞数 3

分类专栏：面试总结

本文链接：https://blog.csdn.net/Zwx886/article/details/102711138

版权

一、CSS问题

1.flex布局

display:flex; 在父元素设置，子元素受弹性盒影响，默认排成一行，如果超出一行，按比例压缩
flex:1; 子元素设置，设置子元素如何分配父元素的空间，flex:1,子元素宽度占满整个父元素align-items:center 定义子元素在父容器中的对齐方式，center 垂直居中justify-content:center 设置子元素在父元素中居中，前提是子元素没有把父元素占满，让子元素水平居中。

2.css3的新特性

transtion
transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

transition-delay 定义过渡效果何时开始。

animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。

ainimation实现动画效果主要由两部分组成：

通过类似Flash动画中的帧来声明一个动画；

在animation属性中调用关键帧声明的动画。

translate 3D建模效果

3.img中alt和title的区别

图片中的 alt属性是在图片不能正常显示时出现的文本提示。

图片中的 title属性是在鼠标在移动到元素上的文本提示。

4.用纯CSS创建一个三角形

 <style>
    div {
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 40px solid #ff0000;
    }
    </style>
</head>
<body>
  <div></div>
</body>

5.如何理解CSS的盒子模型？

标准盒子模型：宽度=内容的宽度（content）+ border + padding

低版本IE盒子模型：宽度=内容宽度（content+border+padding）

6.如何让一个div水平居中

已知宽度，block元素，添加添加margin:0 auto属性。

已知宽度，绝对定位的居中，上下左右都为0，margin:auto

7.如何让一个div水平垂直居中

div {
position: relative / fixed; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-top:-150px;
margin-left:-250px;
 外边距为自身宽高的一半 */
background-color: pink; /* 方便看效果 */
 }

.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
 
}
.container div {
width: 100px; /* 可省 */
height: 100px; /* 可省 */
background-color: pink; /* 方便看效果 */
}

8.如何清除浮动？

clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式
{clear:both;height:0;overflow:hidden;}

给浮动元素父级设置高度

父级同时浮动（需要给父级同级元素添加浮动）

父级设置成inline-block，其margin: 0 auto居中方式失效

给父级添加overflow:hidden 清除浮动方法

万能清除法 after伪类清浮动（现在主流方法，推荐使用）

float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}

9.css3实现三栏布局，左右固定，中间自适应

圣杯布局/双飞翼布局

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .middle,
        .left,
        .right {
            position: relative;
            float: left;
            min-height: 130px;
        }
        .container {
            padding: 0 220px 0 200px;
            overflow: hidden;
        }
        .left {
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: red;
        }
        .right {
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: green;
        }
        .middle {
            width: 100%;
            background: blue;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class='container'>
        <div class='middle'></div>
        <div class='left'></div>
        <div class='right'></div>
    </div>
</body>

10.display:none 和 visibility: hidden的区别

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

11.CSS中 link 和@import 的区别是？

link属于HTML标签，而@import是CSS提供的页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载

import只在IE5以上才能识别，而link是HTML标签，无兼容问题

link方式的样式的权重高于@import的权重.

12.position的absolute与fixed共同点与不同点

共同点：
改变行内元素的呈现方式，display被置为block
让元素脱离普通流，不占据空间
默认会覆盖到非定位元素上

不同点：
absolute的”根元素“是可以设置的
fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

13…transition和animation的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，
而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from … to，而animation可以一帧一帧的。

transition 规定动画的名字规定完成过渡效果需要多少秒或毫秒规定速度效果定义过渡效果何时开始
animation 指定要绑定到选择器的关键帧的名称

14.CSS优先级

不同级别：总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
	1.属性后面加!import 会覆盖页面内任何位置定义的元素样式
	2.作为style属性写在元素内的样式
	3.id选择器
	4.类选择器
	5.标签选择器
	6.通配符选择器（*）
	7.浏览器自定义或继承
**同一级别：后写的会覆盖先写的**

css选择器的解析原则：选择器定位DOM元素是从右往左的方向，这样可以尽早的过滤掉一些不必要的样式规则和元素

15.雪碧图：

        多个图片集成在一个图片中的图
	使用雪碧图可以减少网络请求的次数，加快允许的速度
	通过background-position，去定位图片在屏幕的哪个位置

二、JS问题

1.typeof和instance of 检测数据类型有什么区别？

相同点：
都常用来判断一个变量是否为空，或者是什么类型的。

不同点：
typeof 返回值是一个字符串，用来说明变量的数据类型
instanceof 用于判断一个变量是否属于某个对象的实例.

16.使元素消失的方法

visibility:hidden、display:none、z-index=-1、opacity：0
1.opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
2.visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3.display:node, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉

.谈一谈深克隆和浅克隆？

浅克隆:
只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做“（浅复制）浅拷贝”，换句话说，浅复制仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅复制出来的对象也会相应改变。

深克隆：
创建一个新对象，属性中引用的其他对象也会被克隆，不再指向原有对象地址。
JSON.parse、JSON.stringify()

3.es6的新特性都有哪些？

let定义块级作用域变量
没有变量的提升，必须先声明后使用
let声明的变量，不能与前面的let，var，conset声明的变量重名

const 定义只读变量
const声明变量的同时必须赋值，const声明的变量必须初始化，一旦初始化完毕就不允许修改
const声明变量也是一个块级作用域变量
const声明的变量没有“变量的提升”，必须先声明后使用
const声明的变量不能与前面的let， var ， const声明的变量重
const定义的对象\数组中的属性值可以修改,基础数据类型不可以

ES6可以给形参函数设置默认值

在数组之前加上三个点（…）展开运算符

数组的解构赋值、对象的解构赋值

箭头函数的特点
箭头函数相当于匿名函数，是不能作为构造函数的，不能被new
箭头函数没有arguments实参集合,取而代之用…剩余运算符解决
箭头函数没有自己的this。他的this是继承当前上下文中的this
箭头函数没有函数原型
箭头函数不能当做Generator函数，不能使用yield关键字
不能使用call、apply、bind改变箭头函数中this指向
Set数据结构，数组去重

4.和=区别是什么？

=赋值

==返回一个布尔值；相等返回true，不相等返回false；
允许不同数据类型之间的比较；
如果是不同类型的数据进行，会默认进行数据类型之间的转换；
如果是对象数据类型的比较，比较的是空间地址

=== 只要数据类型不一样，就返回false；

5.常见的设计模式有哪些？

1、js工厂模式
2、js构造函数模式
3、js原型模式
4、构造函数+原型的js混合模式
5、构造函数+原型的动态原型模式
6、观察者模式
7、发布订阅模式

6.call bind apply 的区别？

call() 和apply()的第一个参数相同，就是指定的对象。这个对象就是该函数的执行上下文。

call()和apply()的区别就在于，两者之间的参数。

call()在第一个参数之后的后续所有参数就是传入该函数的值。

apply() 只有两个参数，第一个是对象，第二个是数组，这个数组就是该函数的参数。
bind() 方法和前两者不同在于： bind() 方法会返回执行上下文被改变的函数而不会立即执行，而前两者是直接执行该函数。他的参数和call()相同。

7.js继承方式有哪些？

原型链继承
核心：将父类的实例作为子类的原型

构造继承
核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类

实例继承
核心：为父类实例添加新特性，作为子类实例返回

拷贝继承

组合继承
核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

寄生组合继承
核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

8.你怎样看待闭包？

个人感觉，简单来说闭包就是在函数里面声明函数，本质上说就是在函数内部和函数外部搭建起一座桥梁，使得子函数可以访问父函数中所有的局部变量，但是反之不可以，这只是闭包的作用之一，另一个作用，则是保护变量不受外界污染，使其一直存在内存中，在工作中我们还是少使用闭包的好，因为闭包太消耗内存，不到万不得已的时候尽量不使用。

9.你是如何理解原型和原型链的？

把所有的对象共用的属性全部放在堆内存的一个对象（共用属性组成的对象），然后让每一个对象的 __proto__存储这个「共用属性组成的对象」的地址。而这个共用属性就是原型，原型出现的目的就是为了减少不必要的内存消耗。而原型链就是对象通过__proto__向当前实例所属类的原型上查找属性或方法的机制，如果找到Object的原型上还是没有找到想要的属性或者是方法则查找结束，最终会返回undefined

10.浏览器渲染的主要流程是什么?

将html代码按照深度优先遍历来生成DOM树。
css文件下载完后也会进行渲染，生成相应的CSSOM。
当所有的css文件下载完且所有的CSSOM构建结束后，就会和DOM一起生成Render Tree。
接下来，浏览器就会进入Layout环节，将所有的节点位置计算出来。
最后，通过Painting环节将所有的节点内容呈现到屏幕上。

11.从输入url地址到页面相应都发生了什么？

1、浏览器的地址栏输入URL并按下回车。
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。3、DNS解析URL对应的IP。
4、根据IP建立TCP连接（三次握手）。
5、HTTP发起请求。
6、服务器处理请求，浏览器接收HTTP响应。
7、渲染页面，构建DOM树。
8、关闭TCP连接（四次挥手）

12.session、cookie、localStorage的区别

相同点
都是保存在浏览器端，且同源的。

不同点

cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。
而sessionStorage和localSt

最低0.47元/天解锁文章

Zwx886

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
web前端面试总结(自认为还算全面哈哈哈哈哈！！！）

一、CSS问题1.flex布局display:flex; 在父元素设置，子元素受弹性盒影响，默认排成一行，如果超出一行，按比例压缩flex:1; 子元素设置，设置子元素如何分配父元素的空间，flex:1,子元素宽度占满整个父元素align-items:center 定义子元素在父容器中的对齐方式，center 垂直居中justify-content:center 设置子元素在父元素中居中，...
复制链接

扫一扫