1. 简述Chrome盒模型与IE盒模型的区别(掌握）
每个元素在页面中占位大小 = content + padding + margin + border
Chrome盒模型的内容大小 = content
IE盒模型的内容大小 = content + padding + border
2. 行内元素和块级元素都有哪一些？(掌握）
- 行内元素：
<span>、<a>、<b>、<strong>、<textare>、<select>、<em>、<del>、<img>、<input>
- 块级元素：
<div>、<p>、<h1>~<h6>、<table>、<form>、<ul>、<ol>、<dl>、<address>、<pre>、<center>
3. BFC(掌握）
块级格式化上下文
流体特性：块状水平元素，如div元素(下同)，在默认情况下（非浮动，绝对定位等），水平方向会自动填满外部的容器。
BFC元素特性表现原则就是，内部子元素不会影响外部的元素
4. 什么是弹性布局？(掌握）
解决某元素中子元素的布局方式，为布局提供最大的灵活性。
设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
display: flex; 属性align-self定义子元素的位置。
5. html5 有哪些新特性？(掌握）
-
Canvas绘图
-
SVG绘图
-
地理定位
-
Web Worker —— 是运行在后台的JS，独立于其他脚本，不会影响到页面的性能
-
Web Storage
1）Cookie技术 （兼容性好，数据不能超4kb，操作复杂）
2）sessionStorage （兼容性差，数据不能超8MB，操作简单）
3）localStorage
-
Web Socket —— WebSocket协议是基于TCP的一种新的网络协议，它实现了浏览器和服务器全双工通信，允许服务器主动发送消息给客户端。
6. position 有哪些属性？(掌握）
- position: relative; 相对定位
- position: absolute; 绝对定位
- position: fixed; 固定到位
- position: state; 默认值
- position: sticky; 粘性定位
- position: inherit; 规定应该从父元素继承 position 属性的值
- position: initial; 设置该属性为默认值
7. 请说出1px，1rem， 1vh， 1em各自代表的含义？(掌握）
- rem：相对于 html 的 font-size
- px：相对长度单位。 像素 px是相对于显示器屏幕分辨率而言的。
- em：相对于父元素的font-size
- vw/vh：视窗的宽度和高度，相当于屏幕宽度和高度的1%，不过，处理 宽度 的时候 % 更合适，处理 高度 的时候 vh 更好
8. 什么是SPA？(掌握）
单页面Web应用，SPA是一种特殊的Web应用，是加载单个HTML页面并在用户与应用程序交互时更新该页面。
它将所有的活动局限于一个web页面中，仅在该web页面中初始化并加载相应的HTML、CSS、JavaScript。
一旦页面加载完成，SPA不会因为用户的操作而重新加载页面或者跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示和隐藏），从而实现UI与用户的交互。
在SPA应用中，应用加载之后就不会有整页刷新。相反，展示逻辑预先加载，并有赖于内容区域中的视图切换来显示内容。
优点：用户体验好，良好的前后端分离。
缺点：不利于SEO；初次加载耗时相对增加；导航不可用，如果一定要导航需要自行涉嫌前进、后退。
9. 简述优雅降级与渐进增强（掌握）
-
渐进增强：针对 低版本浏览器 进行构建页面，完成最基本的功能，然后再针对 高级浏览器 进行 效果、交互 等改进与追加功能，从而达到更好的用户体验。
-
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器 进行兼容。
-
区别：
1）渐进增加观点认为应该 关注内容本身
2）优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站
10. 重绘与重排（掌握）
-
重绘： 一个元素外观的改变所触发的浏览器行为（例如改变 background 等属性），浏览器会根据 元素的新属性 重新绘制，使 元素 呈现新的外观。
-
重排：更明显的一种改变，可以理解为 渲染树 需要重新计算。
-
常见的触发重排的操作
1）DOM元素 的几何属性变化
2）DOM树 的结构变化（例如：节点的增减、移动）
3）获取某些属性（例如：offsetTop等）
4）改变元素的一些样式（例如：调整浏览器窗口大小）
-
两者的区别：重绘不会带来重新布局，并不一定伴随着 重排
