您的位置：首页 > 职场人生

【web前端面试题整理05】做几道前端面试题休息休息吧

2013-06-30 18:06 609 查看

前言

连续学了两天javascript的东西了，我们都累了，于是今天还是上一套面试题吧，大家一起休息休息，也为下个星期可能会有的面试准备下。

题目一览

CSS
1. overflow-x 属于 CSS2 还是 CSS3
2. 请列举几种可以清除浮动的方法（至少两种）
3. display:none 和 visibility:hidden 的区别是什么
4. 请缩写以下代码：
.box {
background-position: 10px 20px;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: red;
background-image: url(box.png);
}
5. 如何让一段文本中的所有英文单词的首字母大写

Javascript
1. 请解释一下什么是闭包
2. call 和 apply 的区别是什么
3. 如何使用原生 Javascript 代码深度克隆一个对象（注意区分对象类型）
4. jQuery 中 $('.class') 和 $('div.class') 在 IE 8 下哪个效率更高，请解释原因

HTML
1. 以下哪个不是 HTML5 的新标签：
a. <article>
b. <section>
c. <address>
d. <time>
2. 正确使用 HTML 和 CSS 实现以下效果（中间方框部分表示图片，右侧为文字列表。尽量不要
使用 float 属性）：
<ignore_js_op style='font: 14px/21px "Microsoft YaHei", Tahoma, sans-serif; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;'>

简答
1. jumei.com 和 weibo.com 完整载入后，html 代码各有多少 KB
2. 最近关注了哪些前端相关的技术/博客/论坛，简述心得和看法

既然题目都搞来了，我们就认认真真的做下吧！

overflow-x 属于 CSS2 还是 CSS3

我在vs2010上面打到overflow的时候是没有overflow-x的提示，所以果断认为他是CSS3的属性，这个属性是用于控制横向滚动条的。

虽说是CSS3提出的属性，但是各个浏览器基本都支持了，所以可以认为是一个标准

visible：
不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto：
此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden：
不显示超过对象尺寸的内容
scroll：
横向显示滚动条

列举几种可以清除浮动的方法（至少两种）

我们前面就说了，说清除浮动不太合理，因为float: none用于表示清楚浮动比较合理，所以我们这里可以改称其为闭合浮动。

float会破坏行内框inline boxes导致line boxes高度坍塌，所以我们需要闭合浮动，解决其引起的坍塌

闭合浮动只有两种方法：

① 添加新标签并为其设置clear: both

② 为父元素设置overflow触发器BFC，强制包裹浮动元素

我们在网上看到的所以方式都是以上的变形，我们理解以上即可，另外提一提其它的。

最经典的就是我们的clearfix了

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

.clearfix {
*zoom: 1;
}

他这个说白了也是增加新标签的一种变形。

display:none 和 visibility:hidden 的区别

这两个家伙区别很大，他们都可以用于隐藏一个元素，但是不同的是：

display的方式将使元素脱离文档流，这种做法可能引起页面reflow，对性能不是很好，所以可以避免就避免吧。

visibility的方式隐藏了元素，但是他的空间还在。

简写CSS

.box {
background-position: 10px 20px;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: red;
background-image: url(box.png);
}

.box { background: red url(box.png) no-repeat 10pz 20px fixed }

这个题出10个我都不怕。。。

让一段文本中的所有英文单词的首字母大写

这个题我不会，但是应该是CSS3里面一个新特性，最后查询了资料：

css的text-transform：none(默认值) | capitalize | uppercase | lowercase |

他可以干我们要的事情

什么是闭包

这个题基本是必问的，我们既然要作答，就好好答吧！

闭包实现原理

当某个函数调用时会创建一个执行环境以及作用域链，然后根据arguments和其它命名参数初始化形成活动对象。

在外部函数调用结束后，其执行环境与作用域链被销毁，但是其活动对象保存在了闭包之中，最后在闭包函数调用结束后才销毁

闭包的实现

在函数中定义函数，并且内部函数引用了外部函数的变量，最后内部函数被返回

闭包的作用

我们的函数可产生类似于块级作用域的东西，内部的变量外部不可访问，但是我们需要提供访问的接口，这个接口的实现便依赖于我们的闭包

闭包的问题

闭包的使用上需要注意，因为他会增大内存的负担，对性能有一点影响，另外闭包有可能会有一些容易出错的场景。

以上便是我对闭包的理解（若是此处要装B应该怎么做呢？）

call 和 apply 的区别是什么

call与apply是函数都具有的一个方式，其作用是可以改变其this的指向，其调用方式有所不同。

call传递参数，apply以数组形式传递与arguments是一对好基友，建议使用。

深度克隆一个对象

昨天才干了这个事情，深度克隆要使用到递归的思想：

function cloneObj(obj) {
var o = obj.constructor == Array ? [] : {}; //首先处理变量，看看是数组还是对象啦
for (var k in obj) {
//我们知道for in 会将原型的东西也给遍历出来，所以我们这里需要做一个判断
if (obj.hasOwnProperty(k)) {
//递归方式处理
o[k] = typeof obj[k] === 'objext' ? cloneObj(obj[k]) : obj[k];
}
}
return o;
}

var a = { a: 'aaa', b: 'bbb', c: { d: 'ddd', e: [1, 2, 4]} };
var b = cloneObj(a);
var s = '';

jQuery 中 $('.class') 和 $('div.class') 在 IE 8 下哪个效率更高

这个涉及到jquery的优化问题了，我们知道jquery选择器是由右向左找寻的

以上是先找寻class的标签，然后在class标签里面找寻只有div的标签，会找两次，应该是后面的高

PS：这道题我理解有问题，下来还有再研究一下

HTML5标签

1. 以下哪个不是 HTML5 的新标签：
a. <article>
b. <section>
c. <address>
d. <time>

abd，我写博客时候都用到过，就只有c没有，没法了只能选他了。

布局题

这个题比较简单，是很常见的两列布局，我们一直不推荐使用float，所以用inline-block实现吧：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.box { border: 1px solid black; width: 360px; height: 180px; }
.box img { height: 160px; margin-left: 10px; }
.box ul { display: inline-block; *display: inline; zoom: 1; vertical-align: 15px; }
</style>
</head>
<body>
<div class="box">
<img src="1.png" alt="叶小钗" />
<ul>
<li><a href="#">刀狂剑痴叶小钗</a></li>
<li><a href="#">刀狂剑痴叶小钗</a></li>
<li><a href="#">刀狂剑痴叶小钗</a></li>
<li><a href="#">刀狂剑痴叶小钗</a></li>
<li><a href="#">刀狂剑痴叶小钗</a></li>
<li><a href="#">刀狂剑痴叶小钗</a></li>
<li><a href="#">刀狂剑痴叶小钗</a></li>
<li><a href="#">刀狂剑痴叶小钗</a></li>
</ul>
</div>
</body>
</html>

具体实现时候一定要上机调试。

结语

今天我们又做了一道题，感觉难度不大，最后两道题属于开放型问题，我这里就不作答了，有兴趣他朋友可以留言。

若是您有好的题目，请留下再走

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航