前端面试题集锦（一）

温馨提示：

经常看一些面试题，能够很好的对自己进行查缺补漏，检验自己的能力。

1、写出transform中2D转换的几大属性及其作用：

答：①translate()：根据坐标原点，浏览器左上角（0，0）进行X轴、
     Y轴上的位置移动

    ②rotate()：根据X轴进行旋转，正值时为顺时针，负值时为逆时针。(deg单位)

    ③scale(parm1,parm2)：根据原大小对其进行放大缩小功能，参数一二对应width和height，和X轴、Y轴。
    ④skew（parm1，parm2）：根据x轴、Y轴进行旋转，单个值时，第二个值默认为0.
    ⑤matrix(a,b,c,d,x,y)：可以实现以上所有transform属性的功能，坐标(x,y)参考以下公式：
    x = ax + cy +x    y = bx + dy +y
具体内容

2、写出opcity的五大兼容性：

.opacity{   
    filter:alpha(opacity=50); /* IE  */ 或者使用rgba（0，0，0，.5）  
    -moz-opacity:0.5; /* 老版Mozilla */  
    -khtml-opacity:0.5; /* 老版Safari */  
    opacity: 0.5; /* 支持opacity的浏览器*/  
    -webkit-opacity: 0.5;/*支持webkit内核浏览器*/
    opcity:.5 /* IE9 + etc...modern browsers */
    }  

3、写出background属性参数顺序及作用：

background:
①background-color (颜色)
②background-image（背景样式）
③background-repeat （是否平铺 no-repeat ，repeat）
④background-attachment（背景状态 scroll fixed local）
⑤background-size
⑥background-position(x,y)

4、写出符号= 、== 和 ===的区别及作用：

① =（赋值）：将某一个值进行赋值操作，x = 5;
②==(比较值)：将两个值进行比较， 8 == 9 -->false
③===（值与类型均进行比较）：进行值和类型的比较

5、写出常用的js事件事件：

事件名	书写
onclick（）	鼠标点击
onmousevoer()	鼠标悬停
ondbclick（）	鼠标双击
onmousemove(event)	鼠标移动
onload()	加载事件（body image）
onunload()	卸载事件（body image）
onfoucs()	聚焦事件
onblur()	失去焦点
onkeypress()	鼠标按下抬起
onkeydown()	鼠标按下
onkeyup()	鼠标抬起
onsubmit（）	表单提交
onreset()	表单重置
onselect（）	用于输入框，当其发生变化时
onchange()	select和文本框状态发生改变时

6、如何设置渐变：

background:
     linear-gradient(color1,color2)(线性渐变)
     radial -gradient(color1,color2)(径向渐变)

7、写出清除浮动的六种方式

①：给父级定义高度
②：添加一个空的div，并且加上clear：both
③：父级定义div，伪类：after 和zoom

<div class="box clear"> 
        <div class="left">Left</div> 
        <div class="right">Right</div> 
      </div> 
      <div class="footer"></div> 

.clear{zoom:1;}/*为解决ie6,ie7浮动问题*/
.clear:after{  /*三者缺一不可*/
  display:block;
  clear:both;
  content:"";
  }

④：父级添加overflow：hidden
⑤：给父级添加::after伪元素
⑥：末尾加上br class=“clear”

<!-- 5、末尾加br -->
      <div class="box5"> 
        <div class="left5">Left</div> 
        <div class="right5">Right</div> 
        <br class="clear">
      </div> 
      <div class="footer5"></div> 

8、定时器的使用

①setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 window.clearInterval() 被调用或窗口被关闭。
②setTimeout() ：在指定的毫秒数后调用函数或计算表达式，取消定时器的方法 window.clearTimeout()

9、函数调用的三种方式

①自调用（两种写法）
   格式：(函数）(参数）

(function (a,b){
        console.log("自调方法（函数）(参数)结果为:"+(a+b))
    })(10,100)//结果110

    (function start(a,b){
        console.log("自调方法（函数）(参数)结果为:"+（a+b))
    })(10,100)//结果110

   格式：(函数(参数））

(function (a,b){
        console.log("自调方法（函数）(参数)结果为:"+(a+b))
    }(10,100))//结果110

    (function start(a,b){
        console.log("自调方法（函数）(参数)结果为:"+（a+b))
    }(10,100))//结果110

②外部调用
③函数调用函数