前端面试

今天去x宝软件公司面试，遇到的几道笔试题，现场没做好，回来之后认真分析学习了一下。一下是题目和我的解答，如果你有更好的答案，评论一下贴出来共同进步

1 外层宽度高度固定，内层宽度高度固定，内层垂直居中

<div class="guding"><div class="gd">居中了</div></div>
<style type="text/css">
.guding{width:500px;height:200px;background:#c2300b;margin-left:50px;position:relative;}
.gd{width:50px;height:20px;background:#fff;position:absolute;top:50%;left:50%;margin-top:-10px;margin-left:-25px;}
</style>

2 外层宽度高度固定，内层高度不确定，内层垂直居中（ps:在ie7测试不成功，待解决，摘自网上），采取仿照table的属性，外层display:table，中层display:table-cell;vertical-align:center;

<div id="wrap">
     <div id="subwrap">
           <div id="content"><pre>现在我们要使这段文字垂直居中显示！</pre></div>
    </div>
</div>
 <style type="text/css">
 body { font-size:12px;font-family:tahoma;}
 #wrap {
  display:table;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:400px;
  overflow:hidden;
  _position:relative;
 }
 #subwrap {
  vertical-align:middle;
  display:table-cell;
 _position:absolute;
 _top:50%;
 }
 #content { 
_position:relative;
_top:-50%;
 }
  </style>

使用table的例子，兼容

 <div id="wrap">
     <table>
        <tr>
            <td>var pets = [{"type":"1","color":"1","age":"1"},{"type":"1","color":"1","age":"1"},{"type":"0","color":"1","age":"0"}];
    for(var k in pets){
        console.log(pets[k]["type"]);
        }</td>
        </tr>
    </table>    
</div>
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}
 #wrap {
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:400px;
 }
table{width:100%; height:100%;}
  </style>

最后自己测试了一下，写了一个兼容的利用css hack (_)IE6 (*)IE7 ie89则采用display:table table-cell vertical-align:middle的方式

<div id="wrap">
     <div id="subwrap">
           <div id="content">现现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现现现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段现现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段在我们要使这段文字垂直居</div>
    </div>
</div>
 <style type="text/css">
 body { font-size:12px;font-family:tahoma;}
 #wrap {
      display:table;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
      height:400px;
      overflow:hidden;
 }
 #subwrap {
     display:table-cell;
     vertical-align:middle;
     width:760px;
     *position:absolute;
      *top:50%;
     _position:relative;
     _top:50%;
 }
 #content { 
    *position:relative;
    *top:-50%;
    _position:relative;
    _top:-50%;
 }
  </style>

<script type="text/javascript">
     var a = 10;
    (function sayHi(){
        var a= a+10;
        alert(a);
        })();
 </script>

分析一下，在sayHi方法里面，var a = a+10;可以理解为

 <script type="text/javascript">
     var a = 10;
    (function sayHi(){
       
       var  a = a+10;//先执行a+10,后将值赋给a
        alert(a);
        })();
 </script>

那么可以知道，a+10 是undefined+10,结果自然就是NaN

<script type="text/javascript">
     var a =10 ;
    say();
    function say()
    {
     var a=a+10;
     alert(a);
     return a;
    }
    alert(a);
    alert(say()+10);
 </script>

同上，一共会弹4次，依次的结果为10 NaN NaN NaN

相关推荐