千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
p1 HTML5面试题
1.如何理解HTML5结构语义化？
可以理解为：用正确的标签做正确的事
比如段落用p标签，标题用h系类标签，边栏用aside标签，主要内容用main标签
2.h5新特性 ？
html5不单单是标签的堆弃了，关于图像位置，存储，多任务等都增加了相关的能力，可以用video和audio直接来播放音视频也可以利用localstorage长期存储数据，浏览器关闭后不会丢失，session的话关闭之后就会自动删除更加安全，增强语义化标签能更好的区分每个标签的作用。智能表单控件：calendar，date，time。新的技术：webworker：起一个子线程、websocket：即时通讯、Geolocation：获取地理信息
移除的元素：纯表现的元素：basefont、big，crenter，s
支持HTML5新标签：IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签、支持新标签后，还需要添加默认的样式
3.描述一下cookies，sessionStorage和localStorage的区别？
1.cookie是网站为了标示当前使用者的身份、存储在用户本地终端上的数据（加密）
2.cookie数据始终在同源的http请求中携带，记会在浏览器和服务器间来回传递
3.sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
4.存储大小：
cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但是比cookie大得多们可以达到5m或更大
5.有效时间：localStorage存储持久数据，浏览器关闭后数据不会丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
4.浏览器的渲染机制一般分为几个步骤？
1.处理HTML 并构建DOM树
2.处理CSS，构建CSSOM树
3.将DOM与CSSOM合并成一个渲染树。
4.根据渲染树来布局，计算每个节点的位置
5.调用GPU绘制，合成图层，显示在屏幕上
5.重绘与回流？
1.重绘是当节点需要更改外观而不影响布局，比如改变color就叫称为重绘
2.回流是布局或者几何属性需要改变就成为回流（需要计算它们在设备视口（viweport）内的确切位置和大小）
回流必定会发生重绘 重绘不一定会引发回流，回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流
导致性能问题：
1）添加或者删除可见的DOM元素
2）元素的位置发生变化
3）元素的尺寸发生改变
优化：减少回流和重绘
1.批量修改DOM
2.对于复杂动画效果，使其脱离文档流
3.CSS3硬件加速（GPU加速）
6.data属性的用法（如何设置，如何获取），有何优势？
data的值获取和设置 2种方法：
1）传统方法 getattribute（）获取data属性值；setattribute（）设置data属性值
2）HTML5新方法
例如data-kerwin
dataset.kerwin 获取data-kerwin属性值
data.kerwin = “中” 设置data-kerwin属性值
注意：
1.传统方法无兼容性问题的但不够优雅、方便
2.html5方法很优雅、方便、但是有兼容性问题
优势：自定义的数据可以让页面拥有更好的交互体验
CSS面试题
1.display:none 与 visibility:hidden:的区别
都是让元素不可见
区别：1）display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间;visiblity:hidden；不会让元素从渲染树消失，渲染树元素继续占据空间只是内容不可见
修改常规流中元素的display通常会造成文档重拍,修改visiblity属性只会造成本元素的重绘
2.外边距折叠（collapsing margins）
相邻的两个或多个margin会合并成一个margin叫做外边距折叠规则如下：
1.两个或多个相邻的普通流中的块元素垂直方向上的margin会折叠
2.浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
3.创建了块级格式化上下文（BFC）的元素，不会和它的子元素发生margin折叠
3.z-index是什么？在position的值什么时候可以触发？
z-index属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠较低的元素的前面，当脱离文档流内容较多，并且相互重叠的时候，就有可能发生本想完全显示的内容被其他内容遮挡的结果，这时我们就需要人为指定哪个层在上面，哪个在下面，z-index属性就是干这个用的
注意：Z-index仅能在定位元素上奏效
在position的值是relative，abslute，fixed，sticky时候可以触发
4.简述box-sizing的有效值以及所对应的盒模型规则
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素
语法：box-sizing:content-box | border-box | inherit
1）box-sizing:content-box；这是由css2.1规定的宽度高度行为，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框，是默认值，如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中
2）box-sizing:border-box 为元素指定任何内边距和边框都将在已设定的宽度和高度内进行绘制，告诉浏览器去理解你设置的边框和内边框的值是包含在width内的
3)box-sizing:inherit：规定应从父元素继承的box-sizing属性的值
5.移动端适配怎么做？
1）meta viewport（视口）
移动端初始视口的大小为什么默认是980px？
因为世界上绝大多数pc网页的版心宽度为980px如果网页没有专门做移动端适配，此时用手机访问网页旁边刚好没有留白，不过页面缩放后文字会变得非常小
为了解决页面缩放的体验问题，在网页代码的头部，加入一行viewport元标签
这里的device-width告诉浏览器，将视口的宽度设置为设备的宽度（这个宽度是人为预设的）不设的话就是980px
2）图片适配
img{ max-width:100% }此时图片会自动缩放，同时图片最大显示为其自身的100%（即最大只可以显示为自身那么大）为什么不用img{ width:100% }？当容器大于图片宽度时，图片会无情的拉伸变形
3）媒体查询
4）动态rem方案
为什么要用rem？
和媒体查询配合，实现响应式布局
px、em、rem有什么不同？
px是像素 是屏幕上显示数据最基本的点、在html中默认的单位是px；em是一个相对大小相对于父元素font-size的百分比大小rem是相对于根元素的font-size
什么是csse transform？transition？animation？区别是什么？
css属性中关于制作动画的三个属性：Transform,Transition,Anmation
1.transform：描述了元素的静态样式本身不会呈现动画效果，可以对元素进行，旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
2.transition样式过度，从一种效果逐渐改变为另一种效果
