总结一下这些天的web前端开发面试题

总结一下这些天的web前端开发面试题_第1张图片
新手

你以为前端就上面的三大特点?

是的,在这次换工作之前我真的认为就这些。

从简单开始梳理题目:

1.前端页面的构成?分别有哪些功能?

分层:

1)结构层(html)structural layer 

由HTML或者XHTML之类的标记语言负责创建,即:标签;

2)表示层(css)presentation layer

解决结构层如何显示的问题。

3)行为层(js)behavior layer

内容如何对事件作出反应一类的问题解决。

2.高度不固定的容器的上下左右的居中显示。(重点是垂直居中)

1)将父级容器设置为:

display:table-cell;

vertical-align:middle;

text-align:center;

2)使用flex

display: flex;

justify-content:center;

align-items:Center;

记住上面两个,还有其他的具体的参考下面的链接地址;

垂直居中的解决

3.margin塌陷的问题,以及margin重叠问题。

相信很多人都知道解决父容器不设置margin的值,只给里面的div设置一个margin-top,会有什么样的结果,就是父容器会margin-top == 子容器的margin-top值。

解决方案:

1)给父容器设置border:1px solid transparent;

2)padding>0

3)float

4)position:absolute;

5)display:inline-block;

6)overflow:hidden/auto;

另外一种情况:

两个div,上面的margin-bottom:30px;下面的:margin-top:10px;中间的间距是30px;取最大的。

解决办法:只设置一个的要么margin-top;要么margin-bottom

4.html5有哪些新特性,优点是什么?(老问题,但是问到了就懵逼了)

1)语义特性:语义话标签更丰富。

2)本地存储

3)设备兼容

4)连接特性

5)网页多媒体特性audio video标签

6)三维、图形及特效特性

7)性能与集成特性

优点:

1)网络标准

2)多设备、跨平台

3)即时更新

4)提高可用性和改进用户的友好体验

5)语义话更强的新标签

6)代替flash和silverlight

7)seo更友好

8)移动端优先,应用于应用程序和游戏

参考地址:

h5的优点及特性

5.css选择器考察

重点记住下面的

总结一下这些天的web前端开发面试题_第2张图片
css选择器

6.cookie 、sessionStorage、localStorage的区别

1)cookie数据始终在同源的http请求中携带(即使不需要),在服务器和浏览器之间来回传递。大小限制:4K

2)sessionStorage:不会把数据发送到服务器,仅保存到本地,大小不同浏览器有不同限制,大概在5M左右。数据有效期不同,只在当前会话内有效。不在不通的浏览器内共享。

3)localStroage:在所有同源窗口中都会是共享的。大小同5M左右。可以持久保存。

7.flex的属性

flex-direction:排列方式

flex-wrap:是否换行

justify-content:对齐方式(flex-start,flex-end,center,space-between,space-around)

align-items对齐方式(flex-start,flex-end,center,baseline,stretch)

align-content:(flex-start,flex-end,center,stretch,space-between,space-around)

flex-grow:设置空间比例,等比放大或缩小

flex-shrink:默认值为1,如果设置为:0,则在空间不足的情况下值为1的等比缩小。

flex-basis:将项目设置固定空间。

8.清除浮动的方法

1)给父容器设置高度

2)浮动元素结尾增加一个空的div:clear:both;

3)通过伪元素设置:after{content:"",display:block;clear:both;}

4)父容器overflow:hidden;

5)父容器:overflow:auto;

9.link和@import的区别

1)link是xhtml标签,除了可以加载css还可以定义RSS等其他事件,@import属于css范畴,只能加载css

2)link引用css时,在页面载入的同时加载;@import在页面完全加载完成之后加载。

3)link无兼容性问题,@import低版本浏览器不支持(目前可以忽略)

4)link支持使用javascript控制DOM去改变样式;@import不支持;


下面是一些js相关的



10.闭包(老生常谈)

官网:是一个拥有许多变量和一个绑定了这些变量的环境表达式,因而这些变量也是表达式的一部分。

自己的理解:闭包就是能够读取其他函数内部变量的函数。

参考:阮一峰博客

11.下面的方法输出


总结一下这些天的web前端开发面试题_第3张图片
写出输出值

正确答案:

undefined 0 0 0 

undefined 0 1 2 

undefined 0 1 1

考察内容(js的参数传递)

12.下面的方法的输出


总结一下这些天的web前端开发面试题_第4张图片
输出值

正确答案:2 4 1 1 2 3 3

考察变量的提升(不确定,这题目变态)

13.写一个数组去重的方法

第一种:


总结一下这些天的web前端开发面试题_第5张图片
方法一

方法二:


总结一下这些天的web前端开发面试题_第6张图片
现排序后比较

方法三:也算事比较高级的一种,思路比较清晰


总结一下这些天的web前端开发面试题_第7张图片
使用对象赋值检测重复

14.promise方法的理解和使用

参考:参考文档,自己理解

15.简述一下javascript原型链继承原理(懵逼了的给我打赏丷丷)

ps:这是一段废话,我看到这个题目的时候真不知道怎么讲,javascript原型链的继承实现方式:object.prototype.functionName;原理是啥?

查询之后的结果:通过新的实例继承父构造函数与其原型的属性,然后通过替换子构造函数原型达到继承的目的

参考文献:原型链详解

16.href和src的区别!

href是引入超文本,src是具体的来源地址。一个是引入,一个是引用,引入不影响页面结构,引用影响。

ps:(没有总结完,会不定期的添加,直到我的工作定下来!)

你可能感兴趣的:(总结一下这些天的web前端开发面试题)