前言

连续学了两天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. Windows phone8.1教务在线客户端

    本人是个大二学生,由于学校的教务在线一直没出windows phone的教务在线,而且本身也对wp开发感兴趣,所以就尝试着开发一下 由于没有系统的学习,只能在摸索中前进,这背后的原理很简单,可不容易实 ...

  2. html5实战2

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  3. 【OC简介-类和对象】

    OC与C语言相比,体现的是一种面向对象的思想.OC完全兼容C语言 OC中大多数类前面都有前缀NS,来源于乔布斯NextStep团队,被苹果收购后保留了所有基本语法,合并到Foundation中 OC语 ...

  4. Xml文件并发读写的解决方法

    之前对xml的操作大都是通过XmlDocument对象来进行,但是这样的情况对于没有并发的是非常合适的,最近遇到了并发读写xml文件的情况.通过文件流来操作能解决大部分的并发情况,对于极端的情况会有问 ...

  5. 如何自行处理写好的eclipse插件安装不生效

    本帖最后由 anrainie 于 2013-7-23 11:31 编辑 对于eclipse插件开发的新手,经常会遇到插件写好了,拷贝到plugins或dropins文件下,但是没有生效.上网各种问,也 ...

  6. 图解集合2：LinkedList

    初识LinkedList 上一篇中讲解了ArrayList,本篇文章讲解一下LinkedList的实现. LinkedList是基于链表实现的,所以先讲解一下什么是链表.链表原先是C/C++的概念,是 ...

  7. Homework 3

    1. 是否需要有代码规范? 这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. (反对) 我是个艺术家,手艺人,我有自己的规范和原则.  (反对) 规范不能强求一律, ...

  8. git版本管理策略及相关技巧(A)

    公司几乎所有的项目都是使用 git 仓库来管理代码,以前对 git 只有些肤浅的了解,每次提交代码或者上线的时候总是会提心吊胆,生怕出现一些未知的问题.经过三个月的踩坑和填坑, git 操作颇显成熟. ...

  9. css自适应宽高等腰梯形

    t1是梯形, ct是梯形里面的内容. 梯形的高度会随着内容的高度撑高.宽度随着浏览器窗口变宽. 梯形上窄下宽或上宽下窄可以通过 transform 的大小来修改. <div class=&quo ...

  10. rabbitmq消息队列——"topic型交换器"

    在之前的章节中我们改进了我们的日志系统,我们使用direct型交换器代替了只能盲目广播消息的fanout型交换器,这使得我们可以有选择性地接收日志. 尽管使用direct型交换器改进了我们的日志系统, ...