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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

范大脚脚 2017-12-28 20:48:00 浏览697
展开阅读全文
前言

连续学了两天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′)和(′.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;'>未命名.gif 

简答
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了

复制代码
 1 .clearfix:after { 
 2     content: ".";
 3     display: block;
 4     height: 0;
 5     visibility: hidden;
 6     clear: both;
 7 }
 8 
 9 .clearfix {
10     *zoom: 1;
11 }
复制代码
他这个说白了也是增加新标签的一种变形。

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是一对好基友,建议使用。

深度克隆一个对象

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

复制代码
 1 function cloneObj(obj) {
 2      var o = obj.constructor == Array ? [] : {}; //首先处理变量,看看是数组还是对象啦
 3      for (var k in obj) {
 4          //我们知道for in 会将原型的东西也给遍历出来,所以我们这里需要做一个判断
 5          if (obj.hasOwnProperty(k)) {
 6              //递归方式处理
 7              o[k] = typeof obj[k] === 'objext' ? cloneObj(obj[k]) : obj[k];
 8          }
 9      }
10      return o;
11  }
12  
13  var a = { a: 'aaa', b: 'bbb', c: { d: 'ddd', e: [1, 2, 4]} };
14  var b = cloneObj(a);
15  var s = '';
复制代码
jQuery 中  (′.class′)和(′.class′)和('div.class')  在 IE 8 下哪个效率更高

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

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

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

HTML5标签

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

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

布局题

未命名.gif

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

复制代码
 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style>
 5         .box { border: 1px solid black; width: 360px; height: 180px; }
 6         .box img { height: 160px; margin-left: 10px; }
 7         .box ul { display: inline-block; *display: inline; zoom: 1; vertical-align: 15px; }
 8     </style>
 9 </head>
10 <body>
11     <div class="box">
12         <img src="1.png" alt="叶小钗" />
13         <ul>
14             <li><a href="#">刀狂剑痴叶小钗</a></li>
15             <li><a href="#">刀狂剑痴叶小钗</a></li>
16             <li><a href="#">刀狂剑痴叶小钗</a></li>
17             <li><a href="#">刀狂剑痴叶小钗</a></li>
18             <li><a href="#">刀狂剑痴叶小钗</a></li>
19             <li><a href="#">刀狂剑痴叶小钗</a></li>
20             <li><a href="#">刀狂剑痴叶小钗</a></li>
21             <li><a href="#">刀狂剑痴叶小钗</a></li>
22         </ul>
23     </div>
24 </body>
25 </html>
复制代码
具体实现时候一定要上机调试。



结语

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

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

本文转自叶小钗博客园博客,原文链接:http://www.cnblogs.com/yexiaochai/p/3163657.html,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
范大脚脚
+ 关注