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