常见前端面试题及答案(9)

•请解释一下*{box-sizing:border-box;}的作用,并且说明使用它有什么好处？

说到IE的bug，在IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它浏览器不同，将border与padding都包含在width之内。而另外一些浏览器则与它相反，是不包括border和padding的。

在我们开发的过程中会发现，有时候，如果对页面中的大区域进行设置时，将border、padding计算到width和height之内，反而更灵活。但W3C的CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题，css3中引入了一个新的属性：box-sizing，它具有“content-box”和”border-box“两个值。

 box-sizing:content-box

当我们设置box-sizing:content-box;时，浏览器对盒模型的解释遵从我们之前认识到的W3C标准，当它定义width和height时，它的宽度不包括border和padding。

 box-sizing:border-box

当我们设置box-sizing:border-box;时，浏览器对盒模型的解释与IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和“height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

37.请罗列出你所知道的display属性的全部值。

display属性的值列表如下：

38.请解释一下relative、fixed、absolute和static元素的区别？请解释一下inline和inline-block的区别？

关于第一个问题请看文章CSS之布局与定位 。

inline:此元素会被显示为内联元素，元素前后没有换行符。

inline-block:行内块元素。

39.你目前在使用哪一套CSS框架，或者在产品线上使用过哪一套？(Bootstrap,PureCSS,Foundation等等)
•如果有，请问是哪一套？如果可以，你如何改善CSS框架？
•请问你有使用过CSS Flexbox或者Grid specs吗？如果有，请问在性能和效率的方面你是怎么看的？

40.解释下事件代理。

JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。

 function getEventTarget(e) {
   e=e||window.event;
   return e.target||e.srcElement;
 }