一、请解释 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？
这就是将所有元素的border和padding算在width和height里了，就变成了ie的盒模型了。
使用 * { box-sizing: border-box; }能够统一IE和非IE浏览器之间的差异。
说到 IE 的 bug，在 IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它浏览器不同，将 border 与 padding 都包含在 width 之内。
而另外一些浏览器则与它相反，是不包括border和padding的。
对于IE浏览器，当我们设置 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准，当它定义width和height时，它的宽度不包括border和padding；
对于非IE浏览器，当我们设置box-sizing: border-box; 时，浏览器对盒模型的解释与 IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。
内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。
内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。
二、请罗列出你所知道的 display 属性的全部值
none:不显示 block：此元素将显示为块级元素，此元素前后会带有换行符 inline：默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block：行内块元素
list-item:此元素会作为列表显示 run-in:此元素会根据上下文作为块级元素或内联元素显示 table:此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符
inline-table:此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 table-row:此元素会作为一个表格行显示（类似 <tr>）。
table-cell:此元素会作为一个表格单元格显示（类似 <td> 和 <th>） inherit:规定应该从父元素继承 display 属性的值。
三、请问为何要使用 translate() 而非 absolute positioning，或反之的理由？为什么？
使用 transform 或 position 实现动画效果时是有很大差别。
使用 transform 时，可以让 GPU 参与运算，动画的 FPS 更高。
使用 position 时，最小的动画变化的单位是 1px，而使用 transform 参与时，可以做到更小（动画效果更加平滑）
功能都一样。但是translate不会引起浏览器的重绘和重排，这就相当nice了。
作者：Arno_z
链接：https://www.jianshu.com/p/1c314dd0ba1f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。