一、用css实现div水平垂直居中。
方法一：设置div的宽度和高度，然后设置div为绝对定位，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div分别左移和上移，左移和上移的大小就是该div宽度和高度的一半。
注意：该方法必须已知div的宽度和高度。
#box {
background-color: #00bc9b;
width:400px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px;
margin-top:-150px;
}
<div id="box"></div>
方法二：
元素未知的宽度高度的元素，使其让它的top,bottom,left,right,都与父级的距离为零，如果其元素宽高不够的，就会用margin:auto去填充其大小。
注意：该方法可以用于宽高未知的元素。
从而实现了居中。
#box{
position:absolute;
width:100px;
height:100px;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
background:red;
}
<div id="box"></div>
方法三：
用弹性盒模型实现水平垂直居中
.wrap{
width:400px;
height:400px;
display:flex;
justify-content:center;
align-items:center;
background:red;
}
.content{
width:200px;
height:200px;
background:blue;
}
<div class="wrap">
<div class="content"></div>
</div>
二、解释px/em/rem
1、px像素（Pixel）：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)。
特点：
①IE无法调整那些使用px作为单位的字体大小；
②国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
③Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
2、em:相对长度。1em为父级元素的字体大小。
特点：
①em的值并不是固定的；
②em会继承父级元素的字体大小。
3、rem:相对长度。rem是CSS3新增的一个相对单位（root em，根em）。1rem为HTML根元素的字体大小。除了IE8及更早版本外，所有浏览器均已支持rem。
特点：
①只修改根元素就成比例地调整所有字体大小
②可以避免使用em时字体大小逐层复合的连锁反应。
三、正常正常文档流和脱离文档流的区别
正常文档流：元素排版布局过程中，元素自动从左向右，从上往下排列。
脱离文档流：元素脱离普通排版布局的位置，其他元素会当做脱离文档流的元素不存在进行定位。
补充：
1、block元素和inline元素在文档流中的排列方式
block元素：
①独占一行
②宽度默认填满其父元素宽度
③可以设置宽高和内外边距。
inline元素：
①多个行内元素排列在同一行里，直到一行排不下才会换行
②宽度由内容撑开
③支持水平方向的左右内外边距，不支持竖直方向的左右内外边距。
2、哪些css样式会引起脱离文档流？区别是什么？
position:absolute; position:fixed;和float
绝对定位：完全无视。其他元素和元素内的文本都无视这个元素。
浮动float:部分无视。其他元素会无视这个元素，但元素内的文本会为这个元素让出位置。
3、浮动的定义：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动元素的边框为止。
参考文献：
脱离文档流分析
四、render tree 的创建过程
1、处理HTML标签和js生成的标签建立DOM树
2、处理CSS样式建立CSSOM树
3、连接CSSOM树和DOM树形成一个render树
4、从根节点递归调用，计算render树上每一个可见节点的大小、形状和位置（reflow）
5、在屏幕上画出每一个可见节点(repaint)
补充：
有哪些不可见的节点？
1、一些节点完全不可见，如script标签，meta标签等等，这些节点不会影响渲染输出。
2、通过css样式被隐藏的节点，如css样式为display:none的节点。
渲染树render tree
五、repaint（重绘） reflow（回流）
reflow:浏览器根据css样式计算元素的大小、形状、位置，并将元素放到它该出现的位置，这个过程称为reflow。（元素布局发生改变）
repaint:当DOM节点的位置、大小、形状等样式都确定下来，浏览器按照元素各自的样式，将这些元素重新绘制了一遍，使页面呈现出来，这个过程叫做repaint。（元素的颜色等属性发生改变，但并未影响布局）
注意：回流必然重绘，重绘不一定引起回流。
补充：
1、引起Repain和Reflow的一些操作
①增加、删除、修改DOM节点
②移动DOM的位置
③resize窗口或滚动页面。
④动画
⑤修改网页的默认字体
⑥设置style属性的值
⑦修改或删除css样式
常见例子：
display:none会触发reflow,visibility:hidden只会触发repaint
2、如何减少repaint和 reflow?
①避免逐条修改css样式。可以预先定义好css的class样式，通过修改className将多次样式属性的操作合并成一次操作。
②对需要进行复杂操作的元素进行“离线处理”，处理完后一起更新
a、使用DocumentFragment进行缓存操作
b、使用display:none
c、使用cloneNode()和replaceChild技术
③避免在循环中修改DOM节点
④尽可能修改层级比较低的DOM节点
⑤将需要多次重排的元素的position属性设置为absolute或fixed,使元素脱离文档流。这样它们的改变不会影响到其他元素的布局，只会引起重绘而不是回流。
⑥避免使用table布局，因为table中的某个元素触发reflow会导致table里面所有元素的reflow。
⑦避免使用css的javaScript表达式？？？（没搞懂），如果css里面有expression，每次都会重新计算一遍。
参考文献：
reflow（回流）和repaint（重绘）及其优化
六、前端MVC MVVM
1、MVC：
模型（Model）:数据保存。
视图（view）:用户界面。
控制器（Controller）:业务逻辑。
各部分之间的通信方式如下：
①View传送指令到Controller
②Controller完成业务逻辑后，要求Model改变状态
③Model将新的数据发送到View,用户得到反馈。
注意：所有的通信都是单向的。
2、MVP:
模型（Model）:数据保存
视图（View）：用户界面。
Prensenter:业务逻辑。
①各部分之间的通信都是双向的。
②View和Model不发生联系，都通过Presenter传递。
③View不部署任何业务逻辑，被称为“被动视图”（Passive View）。所有业务逻辑都部署在Presenter中。
3、MVVM
MVVM模式将Presenter改名为ViewModel，基本上与MVP模式完全一致。
唯一的区别是，它采用双向绑定（data-binding）:View的变动，自动反映在ViewModel，反之亦然。
参考文献：
MVC，MVP 和 MVVM 的图示
七、box-sizing？在应用中优先选用哪种？
box-sizing属性
--content-box:维持了W3C标准的盒模型。
--border-box:维持了IE传统（IE怪异模式）下的盒模型。
优先选用border-box，原因是：
①在布局上：
②在表单上：
