前言

连续学了两天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:;

     visibility: hidden;

     clear: both;

 }

 .clearfix {

     *zoom:;

 }

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

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>

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

结语

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

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

【web前端面试题整理05】做几道前端面试题休息休息吧的更多相关文章

  1. web前后端框架整理

    nodejs <——> Express <———> bootstrap <———> angularJS <————> jquery <—————& ...

  2. 2016最全的web前端面试题及答案整理

    面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...

  3. 【web前端面试题整理06】成都第一弹，邂逅聚美优品

    前言 上周四回了成都,休息了一下下,工作问题还是需要解决的,于是今天去面试了一下,现在面试回来了,我感觉还是可以整理一下心得. 这个面试题整理系列是为了以后前端方面的兄弟面试时候可以得到一点点帮助,因 ...

  4. 【web前端面试题整理08】说说最近几次面试（水）

    为什么换工作 换工作简单来讲一般会归纳为钱不够或者人不对,我们团队氛围很不错,所以基本就定位到钱不够了,而我更多是考虑到以后的职业发展,简单说来就是对以后几年的工作有想法,而这种想法实现不一定能在现在 ...

  5. web前端面试题库

    web前端面试题及答案   1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera.    (Q2) ...

  6. 金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上

    金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待! ...

  7. 第136天：Web前端面试题总结（理论）

    Web前端面试题总结 HTML+CSS理论知识 1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服 ...

  8. 好程序员分享Web前端面试题汇总JS篇之跨域问题

    为什么80%的码农都做不了架构师?>>>   好程序员分享Web前端面试题汇总JS篇之跨域问题,接着上一篇文章我们继续来探讨web前端面试必备面试题. 跨域解决方案 1. 通过jso ...

  9. web前端面试题HTML/CSS部分

    web前端面试题HTML/CSS部分 前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...

随机推荐

  1. day11---异步IO\数据库\队列\缓存

    一.RabbitMQ队列 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息 ...

  2. STL练习题续

    //zjnu 1399 //sort 数组可用//vector sort(vector) #include<iostream> #include<algorithm> usin ...

  3. (function(){...}())与(function(){...})()

    (function(){         ......   }())  或   (function(){            ......   })()  匿名函数自调用,也就是说,定义一个匿名函数 ...

  4. Microsoft 参考源代码系统更新，有惊喜哦。

    在以前,MS的参考源代码在单步调试时时好用时不好用,最后我找到了原因,那就是如果想用MS的参考源代码进行单步调试,那么你就得想尽办法把系统上的.NET FX降级到RTM版本(卸载各种相关补丁),今天我 ...

  5. PCWIFI--无线网络共享软件

    前段时间由于需要共享笔记本无线网络给手机使用,在网上找了几个软件试了一下,没找到比较好用的,要么是收费的,要么有广告,要么附带一大堆其他功能,所以决定自己写一个小软件来实现该功能.软件相关介绍如下:  ...

  6. Ubuntu iptables配置

    sudo su sudo apt-get install iptables-persistent modprobe ip_tables #启动iptable   #删除原有iptables规则 ipt ...

  7. 【腾讯Bugly干货分享】微信Tinker的一切都在这里，包括源码(一)

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ecdf2d98250b4631ae034b 最近半年以来,Android热补 ...

  8. Hadoop Pig简介、安装、试用

    相比Java的MapReduce api,Pig为大型数据集的处理提供了更高层次的抽象,与MapReduce相比,Pig提供了更丰富的数据结构,一般都是多值和嵌套的数据结构.Pig还提供了一套更强大的 ...

  9. CocoSocket开源下载与编写经验分享

    CocoSocket分享 cocos2dx 3.1都出了,但依然没有发现与它原生的SOCKET支持,于是,这几天在家,手工撸了一个. 目前版本对IOS,ANDROID,WINDOWS支持良好.且为异步 ...

  10. 【译】用jQuery 处理XML--浏览器中的XML与JavaScript

    用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...