前端面试题

1:前端页面的构成，分别有哪些功能

（1）结构层（html） structural layer

由HTML或者XHTML之类的标记语言负责创建，即：标签

（2）表示层（css）preesentation layer

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

（3）行为层（js）behavior layer

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

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

1）将父容器设置为：

display：table-cell;

vertical-algin:middle;

text-algin:center;

2）使用flex：

 disolay:flex;

justify-content:center;

algin-items:center;

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

父容器不设置margin值，只给里面的div设置一个margin-top，会有什么样的结果，就是父容器会margin-top===子容器的margin-top值。

解决方案：

1）给父容器设置border:1px solid transpartent;

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）网页多媒体特性video audio标签

6）三维图形及特效特性

7）性能与集成特性

优点：

网络标准，多设备、跨平台、即时更新，提高可用性和改进用户的友好体验、语义化更强的新标签

代替flash和silverlight、seo、更友好、移动端优先，应用于应用程序和游戏

5、css选择器考察

.into           选择class=“into”的所有元素。

#into          选择id=“into”的所有元素。 

*                 选择所有元素。

p                 选择所有<p>元素。

div,p            选择所有<div>元素和所有<p>元素。

div p           选择所有<div>内部所有<p>元素

div>p          选择父元素为<div>元素的所有<p>元素。

div+p          选择连接在<div>元素之后所有的<p>元素。

6、cookie.sessionStorage、localStorage的区别

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

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

3）locaolStorage:在所有同源窗口中都会共享的。大概5M左右，可以持久保存。

7、flex的属性

flex-direction:排列方式

flex-warp：是否换行

justify-content对齐方式（flex-start,flex-end,center,space-around,space-between）

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不支持；

10、闭包（老生常谈）

闭包就是能够读取其他函数内部变量的函数。

输出方法：

function Foo(){
getName = function(){alert(1)}
return this;
}
Foo.getName = function(){alert(2)}
Foo.prototype.getName = function(){alert(3)}
var getName = function(){alert(4)}
function getName(){alert(5)}
Foo.getName();
getName();
window.getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

前端面试题

原文：https://www.cnblogs.com/Strong-stone/p/10637540.html