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 {

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

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

        img {
            display: none;
            position: absolute;
            left: 10px;
            top: 10px;
            width: 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;
        width: 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;
            width: 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()