2018前端必考面试题总结2

#2018前端必考面试题总结2

• HTML5的离线存储有几种方式？

1.本地存储localstorage
存储方式： 以键值对（key-value）的方式存储，永久存储，永不失效，除非手动删除。（每个域名5M）
存储内容：数组，图片，json，样式，脚本…
2.本地存储sessionstorage
HTML5的本地存储API中的localstorage与sessionstorage的使用方法是相同的，区别在于sessionstorage在关闭页面后即被清空，而localstorage则会一直保存。
3.离线缓存application cache
本地缓存应用所需的文件
4.web SQL
关系数据库，通过SQL语句访问。web SQL数据库API并不是HTML5规范的一部分，但是它是一个独立的规范，引用了一组使用SQL操作客户端数据库的APIs。
5.IndexedDB
索引数据库（IndexedDB）API（作为HTML5的一部分）对创建具有丰富本地存储数据的数据密集型的离线HTML5 web应用程序很有用。同时它还有助于本地缓存数据，使传统在线web应用程序（比如移动web应用程序）能够更快地运行和响应。

• iframe有哪些缺点？

1.页面样式调试麻烦，出现多个滚动条，用户体验差；
2.浏览器的后退按钮失效；
3.过多会增加服务器的HTTP请求；
4.小型的移动设备无法完全显示框架，设备兼容性差；
5.产生多个页面，不易管理；
6.不容易打印；
7.代码复杂，无法被一些搜索引擎解读，不利于搜索引擎优化。
现在基本上都是用ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。

• 请描述一下cookie，sessionStorage和localStorage的区别

共同点：都是保存在浏览器端，且同源的。
区别：
1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地 保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2.存储大小也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3.数据有效期不同，sessionStorage仅在当前窗口关闭前有效；localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据，cookie只在设置的cookie过期时间之前一直有效。
4.作用域不同，sessionStorage不在不同的浏览器窗口*享，即使是同一个页面；localStorage在所有的同源窗口中都是共享的；cookie也是在所有同源窗口（协议相同，域名相同，端口相同）中是共享的。
5.sessionStorage和localStorage是HTML5 web Storage API提供的，可以方便的在web请求之间保存数据。web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。web Storage的API接口使用更方便。

• CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？

（1）id选择器（#idname）
（2）类选择器（.classname）
（3）标签选择器（div，h1,p）
（4）相邻选择器（h1+p）
（5）子选择器（ul>li）
（6）后代选择器（li a）
（7）通配符选择器（ * )
（8）属性选择器（a[rel=“external”]）
（9）伪类选择器（a:hover,li:nth-child）
所有元素都可继承的属性有：visibility和cursor
内联元素可继承的属性有：line-height、color、font、text-decoration、text-transform、direction
块元素可继承的属性有：list-style、list-style-type、list-style-position、list-style-image
不可继承的属性有：display、margin、padding、border、background、overflow、position、float…
CSS优先级的计算：
内联样式的权重 1000
ID选择器的权重 100
类选择器、属性选择器或伪类的权重 10
元素权重 1
通配选择器* 的权重 0
！important的权重 10000
优先级就近原则，同权重情况下样式定义最近者为准。
CSS3新增伪类：
：last-of-type p:last-of-type 选择每个p元素是其父元素的最后一个p元素
：last-child p:last-child 选择所有p元素的最后一个子元素
：first-of-type p:first-of-type 选择每个父元素是p元素的第一个p子元素
：first-child p:first-child 选择器匹配作为任何元素的第一个子元素的p元素
：only-child p:only-child 选择所有仅有一个子元素的p元素
:only-of-type p:only-of-type 选择所有仅有一个子元素为p元素的元素
：nth-child（n） p:nth-child(n) 选择所有p元素的父元素的第N个子元素
:nth-last-child（n） p:nth-last-child 选择所有p元素倒数第N个子元素
：enabled /：disabled 控制表单控件的禁用态
：checked 单选框或复选框被选中

• 如何居中div？如何居中一个浮动元素？

 div{
	width:200px;
	margin:0 auto;
	}

div{
	width:500px;
	height:300px;
	position:relative;
	background-color:pink;
	left:50%;
	top:50%;
	margin:-150px 0 0 -250px;
	//设置宽高，相对定位，left和top都设置为50%，margin-top和margin-left分别设置成负的自身高度和宽度的一半
	}