前端面试的基础四十小问（前20问）_易诚互动前端电话面试问什么问题

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

3. 两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高 (content)
4. 而IE盒模型的宽高是指content+padding+border。

5.垂直居中的几种方式？

答：对已知高度块级元素进行垂直居中:
1、绝对定位，配合top:50%和负margin-top(元素高度一半)进行垂直居中;
2、绝对定位，配合top:0;bot1行垂直居中;
3、设置position:absolute;和calc()函数实现垂直居中;4、使用浮动float实现元素垂直居中;
对未知高度块级元素:
1、设置position: absolute;和tran(x,y)实现水平垂直居中;
2、居于视口单位︰通过使用margin-top: 50vh;配合transform:translateY(-50%);实现视口居中;
3、通过display:table-cell和vertical-align:middle;实现垂直居中;
4、基于flex布局

6.rgba和opacity的透明效果有什么不同？

答：rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）比如，我们写透明的黑色部分都是用opcity（0.5），但这带出来一个问题就是如果你在这一div上写字的话，然后那个字体也会变成透明色。所以我们采取rgba的样式写，前面三个数字分别对应r,g,b,的三种颜色，第四位的数字对应的是透明的系数。

7.position的值，relative和absolute分别是对于谁进行定位的？

答：absolute :生成绝对定位的元素，相对于最近一级的标签属性进行定位;
relative生成相对定位的元素，相对于其在普通流中的位置进行定位
扩展：
position有几种，absolute和relative的区别
1.static(默认属性)，当没有给元素设置position时默认为static
2.absolute（绝对定位），相对于父级第一个设置了position属性进行定位（没有则相对于body，static除外），top，left，bottom，right均是相对于这个父元素的偏移量
3.relative（相对定位），在元素原来的位置上进行定位，top，left，bottom，right的值相当于原来位置的偏移量
4.fixed（固定定位），相对于浏览器视口的定位，不会随着滚动条的滚动而滚动，top，left，bottom，right的值相当于浏览器窗口的定位

区别
1.absolute和relative都会使元素脱离文档流，但不同的是，absolute脱离文档流后不会占用原来的位置，而relative会在原来的位置上留下一个副本占用原来文档流的位置
2.absolute的父元素设有position时，top,left,bottom,right会忽略父级元素的padding值，即始终与父级元素的左上角进行定位，且其层级会始终比父级高，无论父级设置多大的z-index，但relative的定位会受父元素padding值影响
3.absolute是以第一个设置了position的父元素或祖先元素进行定位，而relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式

8.HTML5,CSS3里面新增了哪些特性？

答：
HTML5:
本地离线存储localStorage
新的语义标签
长期存储数据，浏览器关闭
article 独立的内容;
后数据不丢失;
aside侧边栏;
sessionStorage的数据在浏
header头部;
览器关闭后自动删除
nav导航;
新的技术webworker,
section文档中的节;
websocket,Geolocation;
footer页脚;
拖拽释放(Drag and drop)
画布(Canvas)APl;
APl;
地理(Geolocation) APl;表单控件.calendar、date.音频、视频APl(audio,
time、email、url、searc
video);

css3:
圆角(border-radius) ,
阴影(box-shadow)，
2d，3d变换;
对文字加特效(text-shadow),
Transition,
线性渐变(gradient)
animation;
旋转(transform)
媒体查询
transform:rotate(9deg)
新的单位
scale(0.85,0.90) translate
(rem,vw, vh等);
(0px,-30px)
rgba;
skew(-9deg,0deg);旋转,缩放,定位,倾斜

9.BFC是什么？

答：
Block Fromatting Context:块级格式化上下文，简称BFC;
w3C对BFC的定义︰浮动元素和绝对定位元素，非块级盒子的块级容器(例如inline-blocks, table-cells,和table-captions)，以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC

10.常见的兼容性问题？

1．不同浏览器的标签默认外补丁margin和内补丁padding不同;
2.块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大;
3．设置较小的高度标签(一般小于10px)，在IE6,IE7，遨游中超出自己设置的高度;
4．行内标签设置display:block;后又采用float布局，再设置横向margin值时，在IE6中显示会比设置的大;
5.图片默认有间距;
6．标签最低高度设置min-height不兼容;
7．透明度兼容设置;
8.Box Model的bug;
9.IE6中的列表li楼梯状bug;
10.li空白间距;rflow : auto:和position:relative的碰撞;
12.浮动层的错位;
13.IE6克隆文本的bug;
14.IE的图片缩放;
15.IE6 下png图片的透明bug;
16.透明背景bug;
17.禁用IE默认的垂直滚动条;

11.JS数据类型有哪些？

在JavaScript中每一个值都属于某一种数据类型。 JavaScript的数据类型共有六种。 它们分别是undefined、null、boolean、number、string、object JavaScript 只有一种数字类型。 数字可以带小数点，也可以不带 它有两个值：true和false，但需要注意的是true不一定等于1，false不一定等于0。

12.判断一个值是什么类型有哪些方法

typeof运算符，instanceof运算符，object.prototype.tostring方法

13.null和undefined的区别？

(1 ) null是一个表示”无”的对象，转我数值是为0undefined是一个表示”无”的原始值，转为数值时为NaN。当声明的变量还未被初始化时，能量的默认值为undefined;
(2)Null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象;
(3) Undefined表示”缺少值”,就是此处应该有-个值，但是还没有定义;
(4)null表示”没有对象”，即该处不应该有值

undefined和null的区别：. ● undefined 表示一个变量没有被声明，或者被声明了但没有被赋值（未初始化），一个没有传入实参的形参变量的值为undefined，如果一个函数什么都不返回，则该函数默认返回undefined。. null 则表示"什么都没有"，即"空值"。. ●　Javascript将未赋值的变量默认值设为 undefined ；Javascript从来不会将变量设为 null 。. 它是用来让程序员表明某个用var声明的变量时没有值的；.

14.怎么判断一个变量arr是否为数组（此题用typeof不行）？

1.instanceof；
2.对象的constructor属性；
3.object.prototype.tostring;
4.array对象的isarray方法（array.isarray()）;

15.箭头函数有哪些特点？

1.不需要function关键字来创建函数；
2.省略return关键字；
3.改变this的指向；

16.new操作符具体干了什么呢？

1.创建一个空对象；
2.链接到原型；
3.绑定this值（让func中的this指向obj，执行func的函数体）；
4.返回新对象；

17.documen.write和innerHTML的区别？

documen.write是直接将内容写入页面的内容流，会导致页面全部重绘，innerhtml将内容写入某个DOM节点，不会导致全部重绘。
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement,且innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。
document.write是重写整个document, 写入内容是字符串的html
innerHTML是HTMLElement的属性，是一个元素的内部html内容
所以两者都可向页面输出内容,innerHTML比document.write更灵活，而innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

18.什么是ajax过程

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-BKR6Q8Yf-1715228416423)]