2014年爱奇艺前端相关面试题【1】

题目原帖地址：http://www.w3cfuns.com/forum.php?mod=viewthread&tid=5600182&extra=page%3D1%26filter%3Dtypeid%26typeid%3D177%26typeid%3D177

感觉这套题还是很基础，所以留下来以后看~~

1）写一种清除浮动的方法（在不添加任何语义标签的前提下）

<style type="text/css">

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

       这个资源也不错，可以参考： http://www.cnblogs.com/dolphinX/p/3508869.html

2）CSS优先级是怎样判断的

      CSS选择器定义请戳：http://www.w3school.com.cn/css/css_selector_type.asp

      这段总结原文请戳：http://www.cnblogs.com/yongzhi/articles/1267645.html

      通常我们可以将CSS的优先级由高到低分为六组：

1. 无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。
2. 第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
3. 第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
4. 第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器（如a:link）定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
5. 第五级由一个或多个 标签选择器、伪元素（如 ：after）定义。如 div{margin:6px;}  覆盖  *{margin:10px;} 。
6. 最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。

     另外，可以用一句极为简单的话来描述CSS优先级问题：当一个CSS选择器拥有更多的高级别属性时，它的优先级就会比较高。     

     当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：

1. 位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
2. 第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
3. 第三级的优先属性由<link/>标签所引入的样式表定义。
4. 第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
5. 第五级优先的样式有用户设定。
6. 最低级的优先权由浏览器默认。

3）font-family:Tahoma;font-size:14px;line-height:22px;font-weight:bold;写出CSS的缩写

     font:14px/22px bold Tahoma; 

     常见DIV+CSS缩写属性(出自：http://www.divcss5.com/rumen/r115.shtml)：
     1、CSS 文本：

        font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; line-height:22px;

        简写缩写为 font:12px/22px bold Arial, Helvetica, sans-serif;

     2、CSS 背景：

        background-color:#F00;background-image:url(图片地址);background-position:bottom;background-repeat:no-repeat;

        属性缩写为：background:#F00 url(图片地址) no-repeat left bottom

     3、CSS 内补距（CSS padding）:

        padding-top:5px; padding-bottom:10px; padding-left:15px; padding-right:20px;

        即可缩写为padding:5px 20px 10px 15px;

        padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px;

        缩写为padding:5px 10px;

     4、CSS 外边距（CSS margin）:

        margin-top:5px; margin-bottom:10px; margin-left:15px; margin-right:20px;

        即可缩写为margin:5px 20px 10px 15px;

       margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;

       缩写为margin:5px 10px;

     5、CSS 边框：

       border-left:1px solid #000;border-right:1px solid #000;border-top:1px solid #000;border-bottom:1px solid #000;

       即可缩写为：border:1px solid #000;

4）CSS怎样定义才能使一个没有定义宽度的div水平居中

   1.绝对定位法<div style=’position:absolute;top:50%;left:50%;’></div>

   2.单行垂直居中（重点是里面的文字是单行）
     div {
        height:25px;
        line-height:25px;
        overflow:hidden;
       }

    3.多行未知高度文字的垂直居中

      div {
          padding:xxpx; 
       }

    4.多行文本固定高度的垂直居中 （IE6不能正确地理解display:table和display:table-cell，所以要用css hack，想知道为什么这样做，可以参考

     http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html，）

     div#wrap父容器 {
         display:table;
         border:1px solid #FF0099;
         background-color:#FFCCFF;
         760px;
         height:400px;
        _position:relative;
        overflow:hidden;
     }
     div#subwrap子容器 {
        vertical-align:middle;
        display:table-cell;
       _position:absolute;
       _top:50%;
      }
     div#content内容 {
      _position:relative;
      _top:-50%;
      }

    5.宽度高度不固定div的水平居中  

   html部分
   <div class="container">
   <div class="center"><a href="http://gaohaixian.blog.163.com/blog/#">1</a><a href="http://gaohaixian.blog.163.com/blog/#">2</a><a     href="http://gaohaixian.blog.163.com/blog/#">3</a>
   </div>

---

   css部分
  .container{500px;height:80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;}
  .center{display:inline-block;border:2px solid #fff;}
  .center{_display:inline;} /*针对ie6 hack*/
  .center a{float:left;border:1px solid #fff;padding:5px 10px;margin:10px;color:#fff;text-decoration:none;}

   6、垂直水平居中

   html部分
  <div id="vc"><div id="vci"><div id="content">
   我们垂直居中了，我们水平居中了
  </div></div></div>

---

   css部分
  #vc { display:table; background-color:#C2300B; 500px; height:200px; overflow:hidden; margin-left:50px; }
  #vci { vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%; }
  #content { color:#fff; border:1px solid #fff; display:inline-block; _position:relative; _top:-50%; _left:-50%; }

    7、请实现下面浮层demo：

      1. 这是一个盖在页面上的浮层，上下左右居中；浮层展示时，页面不可滚动；

      2. 浏览器窗口缩小时，浮层跟着缩小，最小（320px）；窗口放大，浮层跟着放大，最大（650px）；

      3. 尽可能用HTML5/CSS3方式写，可以不支持IE。

<!DOCTYPE html>
<html>
 <head> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title> new document </title>
  <style>
    .layer{display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:1;background-color:rgba(0,0,0,0.8);}
    .layer .box{position:absolute;min-width:320px;max-width:650px;width:60%;height:500px;left:0;top:0;right:0;bottom:0;margin:auto;background-color:#FFF;}
    .layer .close{position:absolute;right:10px;top:10px;cursor:pointer;}
  </style>
 </head>
 <body>

  
  <input type="button" value="显示层" />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br /><br /><br />
  <br />ssss
  <div class="layer">
    <div class="box">
      <h3>A set of pictures</h3>
      <span class="close">&times;</span>
      画片内容
    </div>
  </div> 
  <script>

    document.getElementsByTagName("input")[0].addEventListener("click",function(){
      document.querySelector(".layer").style.display="block";
      document.documentElement.style.overflowY="hidden";
    },false);
    document.querySelector(".close").addEventListener("click",function(){
      document.querySelector(".layer").style.display="none";
      document.documentElement.style.overflowY="auto";
    },false);

  </script>
 </body>
</html>

5）说说CSS Sprite的优缺点    

优点：  

   利用CSS Sprites能很好地减少网页的http请求；

   CSS Sprites能减少图片的字节；

   解决了网页设计师在图片命名上的困扰；

   更换风格方便。

缺点：

   在图片合并的造成多余的工作量；

   开发过程中定位的麻烦；

   维护复杂

6）说说em和strong标签的语义

• <em> – 原本表示强调，现在指有压力的强调。
• <strong> – 原本表示更强强调，现指相当重要，基本上都是一样的。
• <i>和<b>都是文字样式元素，没有任何语义，就是用来控制文字的长相的，因此又称为表象元素，是一度不推荐使用的标签。如今，这两个元素有了语义，但是，它们的样式又能被CSS改变。像是<b>元素，并不是非得是加粗。正因如此，推荐使用类名来表示其含义以便日后可以轻松改变其样式。

7）.test a{}和.test .exp{}两种样式写法哪种性能比较好，说明理由
<div class="test">
        <a href="" class="exp">1</a>
        <a href="" class="exp">2</a>
        <a href="" class="exp">3</a>
        <a href="" class="exp">4</a>
</div>

     下面摘自：http://www.w3cplus.com/css/css-selector-performance

     浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行。选择器的最后一部分，也就是选择器的最右边部分被称为“关键选择器”，它将决定你的选择器的效率如何，是高还是低。

     选择器有一个固有的效率，我们来看Steve Souders给排的一个顺序：

1. id选择器（#myid）
2. 类选择器（.myclassname）
3. 标签选择器（div,h1,p）
4. 相邻选择器（h1+p）
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（*）
8. 属性选择器（a[rel="external"]）
9. 伪类选择器（a:hover,li:nth-child）

     上面九种选择器的效率是从高到低排下来的，基中ID选择器的效率是最高，而伪类选择器的效率则是最底。

     CSS选择器优化建议：

1. 避免普遍规则
2. 不要在ID选择器前加标签名或类名
3. 不要在类名选择器前加标签名
4. 尽可能使用具体的类别
5. 避免使用后代选择器
6. 标签分类规则中不应该包含一个子选择器
7. 子选择器的问题
8. 借助相关继承关系
9. 使用范围内的样式表

8)javascript中怎么给一个div定义margin-top:30px样式 

document.getElementById("div1").style.marginTop="30px";

   

9)下面代码运行后，alert弹出的值为多少？
(function(){
        var a=[1,2,3];
        var b=a;
        a[0]=99;
        alert(b);
})();

   [99,2,3]

10)写一个简单的选项卡js

       出自：http://js.fgm.cc/learn/lesson2/07.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简易选项卡</title>

<style>

body,ul,li{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

#outer{width:450px;margin:10px auto;}

#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}

#tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}

#tab li.current{color:#000;background:#ccc;}

#content{border:1px solid #000;border-top-width:0;}

#content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}

</style>

<script>

window.onload = function ()

{

    var oLi = document.getElementById("tab").getElementsByTagName("li");

    var oUl = document.getElementById("content").getElementsByTagName("ul");

    

    for(var i = 0; i < oLi.length; i++)

    {

        oLi[i].index = i;

        oLi[i].onmouseover = function ()

        {

            for(var n = 0; n < oLi.length; n++) oLi[n].className="";

            this.className = "current";

            for(var n = 0; n < oUl.length; n++) oUl[n].style.display = "none";

            oUl[this.index].style.display = "block"

        }    

    }

}

</script>

</head>

<body>

<div id="outer">

    <ul id="tab">

        <li class="current">第一课</li>

        <li>第二课</li>

        <li>第三课</li>

    </ul>

    <div id="content">

        <ul style="display:block;">

            <li>网页特效原理分析</li>

            <li>响应用户操作</li>

            <li>提示框效果</li>

            <li>事件驱动</li>

            <li>元素属性操作</li>

            <li>动手编写第一个JS特效</li>

            <li>引入函数</li>

            <li>网页换肤效果</li>

            <li>展开/收缩播放列表效果</li>

        </ul>

        <ul>

            <li>改变网页背景颜色</li>

            <li>函数传参</li>

            <li>高重用性函数的编写</li>

            <li>126邮箱全选效果</li>

            <li>循环及遍历操作</li>

            <li>调试器的简单使用</li>

            <li>典型循环的构成</li>

            <li>for循环配合if判断</li>

            <li>className的使用</li>

            <li>innerHTML的使用</li>

            <li>戛纳印象效果</li>

            <li>数组</li>

            <li>字符串连接</li>

        </ul>

        <ul>

            <li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>

            <li>JavaScript出现的位置、优缺点</li>

            <li>变量、类型、typeof、数据类型转换、变量作用域</li>

            <li>闭包：什么是闭包、简单应用、闭包缺点</li>

            <li>运算符：算术、赋值、关系、逻辑、其他运算符</li>

            <li>程序流程控制：判断、循环、跳出</li>

            <li>命名规范：命名规范及必要性、匈牙利命名法</li>

            <li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li>

            <li>定时器的使用：setInterval、setTimeout</li>

            <li>定时器应用：站长站导航效果</li>

            <li>定时器应用：自动播放的选项卡</li>

            <li>定时器应用：数码时钟</li>

            <li>程序调试方法</li>

        </ul>

    </div>

</div>

</body>

</html>