(一)2014爱奇艺前端面试解答
1.写一种清除浮动的方法(在不添加任何语义标签的前提下)
答:给当前需要清除浮动的元素,即父级元素里面加上一个“clearfix”的标签,例如:
.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }
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而高于其他。
.center{_display:inline;} 为针对ie6的hack,针对ie6前面的display:inline-block;的作用是在ie下触发元素的layout,使其haslayout。
父容器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的优缺点
6.说说em和strong标签的语义
em: Indicates emphasis.
strong: Indicates stronger emphasis.
em 表示强调,strong 表示更强烈的强调。言简意赅,表明了 em 和 strong 的命名来历。在浏览器中,em 默认用斜体表示,strong 用粗体表示。这是第一个层次上的区别。
strong 是重要性强调,和局部还是全局无关,局部强调用strong也可以,strong强调的是重要性,不会改变句意。
7.test a{}和.test .exp{}两种样式写法哪种性能比较好,说明理由
选择器有一个固有的效率,从高到低顺序如下:
- id选择器(#myid)
- 类选择器(.myclassname)
- 标签选择器(div,h1,p)
- 相邻选择器(h1+p)
- 子选择器(ul > li)
- 后代选择器(li a)
- 通配符选择器(*)
- 属性选择器(a[rel="external"])
- 伪类选择器(a:hover,li:nth-child)
上面九种选择器的效率是从高到低排下来的,基中ID选择器的效率是最高,而伪类选择器的效率则是最底。
CSS选择器优化建议:
- 避免普遍规则
- 不要在ID选择器前加标签名或类名
- 不要在类名选择器前加标签名
- 尽可能使用具体的类别
- 避免使用后代选择器
- 标签分类规则中不应该包含一个子选择器
- 子选择器的问题
- 借助相关继承关系
- 使用范围内的样式表
1 | document.getElementById( "div1" ).style.marginTop= "30px" ; |
var a=[1,2,3];
var b=a;
a[0]=99;
alert(b);
})();
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>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | .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 ; } } } } |
// 轮播图片 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); }
<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();
HTML5里引用了新的API,history.pushState和history.replaceState,可以做到无刷新改变页面URL的html可以替换,这里实现方案是:
13.用css实现鼠标悬浮在a元素上1秒后文字颜色变红
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="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一样吗
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步