(一)2014爱奇艺前端面试解答

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

答：给当前需要清除浮动的元素，即父级元素里面加上一个“clearfix”的标签，例如：

 <div id="div-need-clear" class="clearfix"> 
在css里面clearfix的定义如下：
.clearfix:after {
                 content:".";
                 display:block;
                 height:0; 
                 visibility:hidden; 
                 clear:both;
                }
.clearfix { 
              *zoom:1; 
           }
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，有些版本可能content 里面内容为空,不推荐这样做,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来清除浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

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

通配

0000

伪类

0010

标签

0001

伪元素(after/b/f-line/f-letter)

0001

类

0010

ID

0100

属性

0010

important

1000

要注意的是，以上数字为256进制，256个类选择器相当一个ID选择器，如果权值完全相同时，后面会覆盖前面。行内样式优先级低于!important而高于其他。

3.font-family:Tahoma;font-size:14px;line-height:22px;font-weight:bold;写出CSS的缩写
答：   font:14px/22px bold Tahoma; 
 
4.CSS怎样定义才能使一个没有定义宽度的div水平居中
父容器container加css属性 text-align:center;
子容器center加css属性display:inline-block;
.center{_display:inline;} 为针对ie6的hack，针对ie6前面的display:inline-block;的作用是在ie下触发元素的layout，使其haslayout。
 
补充：怎样定义一个没有定义高度的div垂直居中
无固定高度的div垂直居中代码要点：
父容器vc的css属性 display:table;overflow:hidden;
子容器vci的css属性 vertical-align:middle;display:table-cell;
针对ie6的hack，vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;

5.说说CSS Sprite的优缺点
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
优点：  
   1.利用CSS Sprites能很好地减少网页的http请求；
   2.CSS Sprites能减少图片的字节；
   3.解决了FE在图片命名上的困扰；
   4.更换风格方便。
缺点：
   1.在图片合并的造成多余的工作量；
   2.开发过程中定位的麻烦；
   3.修改麻烦，维护复杂

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

em: Indicates emphasis.
strong: Indicates stronger emphasis.

em 表示强调，strong 表示更强烈的强调。言简意赅，表明了 em 和 strong 的命名来历。在浏览器中，em 默认用斜体表示，strong 用粗体表示。这是第一个层次上的区别。

em 是句意强调，加与不加会引起语义变化。 
strong 是重要性强调，和局部还是全局无关，局部强调用strong也可以，strong强调的是重要性，不会改变句意。
 

7.test a{}和.test .exp{}两种样式写法哪种性能比较好，说明理由
答： 浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行。选择器的最后一部分，也就是选择器的最右边部分被称为“关键选择器”，它将决定你的选择器的效率如何，是高还是低。

选择器有一个固有的效率，从高到低顺序如下：

  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样式 
首先给div定义一个id,然后JS如下： 
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
显示部分：渐入渐出切换，包含选项卡序号和对应标题

HTML部分：(用了smarty模板）
 <div class="content-carousel " id="content-carousel">
                    <div class="content-carousel-img">
                        <%foreach $carousel as $i => $item%>
                            <img src="<%$item.url%>" <%if $i === 0%>class="active"<%/if%>/>
                        <%/foreach%>
                    </div>
                    <div class="content-carousel-title">
                        <%foreach $carousel as $i => $item%>
                            <span <%if $i === 0%>class="active"<%/if%>><%$item.title%></span>
                        <%/foreach%>
                    </div>
                    <div class="content-carousel-count">
                        <%foreach $carousel as $i => $item%>
                            <span <%if $i === 0%>class="active"<%/if%>><%$i + 1%></span>
                        <%/foreach%>
                    </div>
                </div>
css部分：用到LESS 
.content-carousel {

     675px;
    height: 410px;
    float: left;
    display: inline;
    position: relative;

    .content-carousel-img {
         675px;
        height: 410px;

        img {
            display: none;
            position: absolute;
            left: 10px;
            top: 10px;
             675px;
            height: 410px;

            &.active {
                display: block;
            }
        }

    }
    .content-carousel-title {
        background-color: rgba(0, 0, 0, 0.3);
        color: #cccccc;
        font-weight: bold;
        line-height: 20px;
        position: absolute;
        left: 10px;
        bottom: 10px;
        padding: 10px;
         655px;
        font-size: 14px;

        span {
            display: none;

            &.active {
                display: inline;
            }
        }
    }

    .content-carousel-count {
        position: absolute;
        right: 15px;
        bottom: 20px;

        span {
            float: left;
            display: inline;
            font-size: 10px;
            line-height: 15px;
             15px;
            margin: 0 2px;
            background-color: #000000;
            color: #cccccc;
            text-align: center;

            &.active {
                background-color: #FF3300;
                color: white;
            }
        }
    }
}

　　

js部分： 
 // 轮播图片
    function carousel() {
        var current = 0;
        var carousel = $("#content-carousel").children("div");
        var carousel_img = $(carousel[0]).children("img");
        var carousel_title = $(carousel[1]).children("span");
        var carousel_count = $(carousel[2]).children("span");
        var total = carousel_count.length;
        carousel_count.each(function (i) {
            $(this).click(function () {
                carousel_img.addClass("active").fadeOut(0).eq(i).fadeIn(500);
                carousel_title.removeClass("active").eq(i).addClass("active");
                carousel_count.removeClass("active").eq(i).addClass("active");
            });
        });
        setInterval(function () {
            current = (current + 1) % total;
            carousel_img.addClass("active").fadeOut(0).eq(current).fadeIn(500);
            carousel_title.removeClass("active").eq(current).addClass("active");
            carousel_count.removeClass("active").eq(current).addClass("active");
        }, 3000);
    }
11.页面上有些图片需要放到最后加载，请基于jquery写一段大致的实现方法
一个基于Lazy Load, 延迟加载图片的 jQuery 插件，Lazy Load 依赖于 jQuery. 可以将下列代码加入页面 head 区域:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.

代码如下：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

处理图片代码如下：

$("img.lazy").lazyload();
 
12.在a页面点击一个连接b.html后如何将页面以无刷新的方式切换到b，且url为b.html
答：传统的ajax有如下的问题：可以无刷新改变页面内容，但无法改变页面URL，为了更好的可访问性，内容发生改变后，通常改变URL的hash
  HTML5里引用了新的API，history.pushState和history.replaceState，可以做到无刷新改变页面URL的html可以替换，这里实现方案是：
 通过ajax获取b.html，然后document.documentElement.innerHTML = response 
  最后：history.replaceState("b.html")

13.用css实现鼠标悬浮在a元素上1秒后文字颜色变红
答:利用css3过渡： 
a{
-ms-transition:all 0 ease-in  1s;
-o-transition:all 0 ease-in  1s;
-moz-transition:all 0 ease-in  1s;
-webkit-transition:all 0 ease-in  1s;
transition:all 0 ease-in  1s;
}
a:hover{
color:red;
}

14.如何实现仅加载可视区域内的图片

lazyload;

15.用json表示一个数组，每个数组元素是一个对象，每个对象有两个属性
[
    {
        "name": "qingqing", 
        "age": 22
    }, 
    {
        "name": "tianxia", 
        "age": 24
    }
]

16.用json表示一个树结构（递归）
 
var x = {
    left: {
        left: {
            value: 31
        },
        right: {
            value: 32
        }
    },
    right: {
        value: 30
    }

};

17.http请求状态码表示的意义
 

1xx:请求已被接受，需要继续处理，临时响应

100 continue

2xx: 代表请求已成功被服务器接收、理解、接受

200OK 201 Created 206Partial Content

3xx:重定向

301 moved permanently

302   found

304 not modified

4xx: 错误的客户端请求

400 bad request

403 forbidden

404 not found

5xx: 服务端错误

500 Internet server Error

502 bad Gateway
 

18.form标签里还有哪些属性
form,表单，表单，用来向服务器提交信息，实现浏览者与服务器的交互。
比如我们常见到代码：里面就涉及到action和method属性。 
<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

这里参考w3school关于form的属性列表：


19.表单中有一些checkbox该如何提交值，name一样吗
答：form.submit()
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/caiyineng/p/5717257.html