记面试后面试题总结

最近想找换一份工作,于是去面试了一家比较大的公司,以下是面试官问的几个关于技术的面试题。

一.css里面有个position,你知道它都有那几个值吗,以及它们的作用是什么?

  这个我回答的是:

  position一共有absolutefixedrelativestaticinherit这几个值,其中inherit是从父元素继承 position 属性的值,fixed是生成绝对定位的元素,相对于浏览器窗口进行定位。absolute是生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。static为默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index声明)。relative是生成相对定位的元素,相对于其正常位置进行定位。

二.你知道css里面有个z-index,现在有一个小A它的z-index为9,另外小B的z-index为10,其中小A 的里面又有一个小C,C的z-index值为11,小A,小B和小C的position值都为absolute,问小C是在小B的上面还是小B的下面?

  这道题主要考的就是对z-index和对position的掌握程度,要完全了解z-index和position的特性才能解答出来,否则就掉进面试官的设的坑里面了。大概代码如下:

  

<div style="position:absolute;z-index:9">
    <div style="position:absolute;z-index:11"></div>
</div>
<div style="position:absolute;z-index:11"></div>

  结果也已经显而易见,小B是在小C的上面,这主要是绝对定位的效果。

三.css有个能启动硬件加速的属性,你知道是哪个吗?

  Chrome, FireFox, Safari, IE9+ 都支持硬件加速,只要使用特定的CSS语句就可以开启硬件加速:

  

/**使用3d效果来开启硬件加速**/
.speed-3D{
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}

  如果并不需要用到transform变换,仅仅是开启硬件加速,可以用下面的语句:

/**原理上还是使用3d效果来开启硬件加速**/
.speed-3d{
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}

四.有个代码的最上面写个settimeout 延时是5秒钟,里面弹出个1,代码下面是一个操作文件的同步代码,要用12秒才能把下面的代码执行完成,问弹出1需要多久?

  这个题主要考的就是js里面同步操作会不会阻止异步操作,他们两是不是互相影响,这个题如果对js不太了解,肯定也会掉进面试官的坑里,这个题的答案是弹出1需要17秒,首先settimeout是异步的,它不会阻止下面的代码执行,然而下面的代码是同步的,它需要执行完再返回执行settimeout,这样弹出1就需要了17秒。

  记得的面试题大概就这些了,希望对大家有所帮助。

原文地址:https://www.cnblogs.com/zhizu/p/8370666.html