前端面试宝典（一）
Hello大家好，兔妞想着咱们分享也有好多了，而且新一轮的秋招又快到了，要不咱收集收集题目，也好自己查缺补漏一下吧～所以最近会有一些面试题目分享给大家，答案也会一并送出哦。但是穿插这中间还是会有干货的分享哟。
1) HTML5有哪些新特性？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
2) Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
（1）声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
（2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
3) HTML5的离线储存有几种方式？请描述一下 cookies，sessionStorage 和 localStorage 的区别？
sessionStorage和localStorage。
cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大；sessionStorage和localStorage有更多丰富易用的接口；sessionStorage和localStorage各自独立的存储空间；
4）行内元素、块级元素分别有哪些，有什么区别？
行内元素：span,a,label,input,img,strong,em
块级元素：div,p,h1,form,ul,li
区别：
• 行内元素与块级元素直观上的区别：行内元素会在一条直线上排列，都是同一行的，水平方向排列；块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
• 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
• 行内元素与块级元素属性的不同，主要是盒模型属性上
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
5） BFC有什么特性、触发方式是什么？有什么使用场景？
- 特性
• 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box叠加。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
• 计算BFC的高度时，浮动元素也参与计算。
- 触发方式
• float除了none以外的值
• overflow除了visible 以外的值（hidden，auto，scroll ）
• display(table-cell，table-caption，inline-block, flex, inline-flex)
• position值为（absolute，fixed）
• fieldset元素
- 使用场景
• 解决margin叠加问题
• 布局
• 清除浮动
7）什么是margin塌陷，解决办法是什么？
当两个或多个垂直边距相遇的时候，形成一个外边距。外边距的高度等于两个发生叠加的外边距高度中的较大者。只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。
- 在父类标签设置overflow：hidden
- 给父级标签设置border属性即可
- BFC
好啦～今天的六道题目就到这里啦，喜欢兔妞所整理的题目的小伙伴记得在看+关注哦～多提宝贵意见哟！