前言

连续学了两天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. DLL和LIB的一些知识点（网上搜集）

    关于lib和dll的区别如下:(1)lib是编译时用到的,dll是运行时用到的.如果要完成源代码的编译,只需要lib:如果要使动态链接的程序运行起来,只需要dll.(2)如果有dll文件,那么lib一 ...

  2. 二进制求最大公约数&&输出二进制

    Divided Land Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Tot ...

  3. [OLE DB 源 [1]] 警告: 无法从 OLE DB 访问接口检索列代码页信息。如果该组件支持“DefaultCodePage”属性，将使用来自该属性的代码页。如果当前的字符串代码页值不正确，请更改该属性的值。如果该组件不支持该属性，将使用来自该组件的区域设置 ID 的代码页。

    SSIS的警告信息,虽然不影响使用,但是对于一个有强迫症的人来说,实在痛苦, 解决办法:控件右键--属性--AlaywayseUseDefaultCodePage 修改成True即可,默认为False

  4. 软件工程课设day3

    下载昨日新版本程序,完成修复项目的测试. 与组内成员讨论,确认项目新模块功能“吐槽墙”的设计方向与实现形式——因为项目为便捷工具类,社区形式的实现方式与项目本质背道而驰.因此决定以“点击目标课程条目, ...

  5. UWP?UWP! - Build 2015有些啥?(2)

    UWP?UWP! - Build 2015有些啥? Build 2015圆满落幕了,不知大家有多少人刷夜看了直播呢?不管怎么说,想必各位都很好奇在这场微软开发者盛宴上,Microsoft又发布了什么令 ...

  6. 使用SQL生成DateTime.Ticks

    在项目中我需要使用到一个随机数(Random Number),该随机数将作为 Hashtable 中的 Key 用于唯一索引数据,所以需要保持单机唯一性. 同时该随机数还需要具备可排序性以便对数据进行 ...

  7. 【C语言学习】《C Primer Plus》第5章 运算符、表达式和语句

    学习总结 1.有了一定的语言基础,运算符和表达式这些都大同小异,无外乎赋值运算符(=).算术运算符(+.-.*./.%.++.——)和其他的一下运算符(sizeof.(type)). 2.声明一个参数 ...

  8. 作业七：团队项目——Alpha版本冲刺阶段-08

    昨天进展:代码编写. 今天安排:代码编写.

  9. VS开发中的代码编写小技巧——避免重复代码编写的几种方法

    上一篇文章中程序员的幸福生活--有你的日子,每天都是情人节,收到了大家的很多好评.鼓励和祝福,非常感动,真诚的谢谢大家.也希望每个朋友都能保持一个积极向上的心态,去迎接丰富多彩的人生. 在开发过程中, ...

  10. L# ForUnity Helloworld的更新方法

    Forunity目录结构 进入plugins 删除这三个目录 从Github代码位置copy 然后删除里面 bin obj property 项目文件等,仅留代码即可. 在editor运行test项目 ...