前言

连续学了两天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. 网上搜集了点资料，学web的人互相分享共同进步吧（php编码的好习惯必须养成）

    网上搜集了点资料,学web的人互相分享共同进步吧 一.优秀的代码应该是什么样的? 优秀的PHP代码应该是结构化的.大段的代码应该被分割整理成一个个函数或方法,而那些不起眼的小段代码则应该加上注释,以便 ...

  2. 更改Android Studio的主题背景

    看到别人炫酷的主题,好奇心使然,想要选择一个自己喜欢的炫酷背景,于是乎百度,动手尝试更换各种主题. 保存下来,留着以后想换主题的时候看. 1.Android Studio自带主题 File -> ...

  3. C++学习心得

    从大一的学习中,我了解到C++是兼容C的面向过程和面向对象的程序设计语言.其中,面向对象程序设计方法是以对象为模板的结构化程序设计方法,是对结构化程序设计方法的继承和发展.刚开始的学习让我觉得特别吃力 ...

  4. reduce() 函数

    reduce()函数 reduce()函数也是Python内置的一个高阶函数.reduce()函数接收的参数和 map()类似,一个函数 f,一个list,但行为和 map()不同,reduce()传 ...

  5. c++的转换

    1.静态转换 static_cast 用于明确定义的变换 ,包括 编译器允许的非强制转换和不太安全但定义清楚的变换.ps:(非强制变换,窄化变换,隐式转换,类层次静态定位,void*强制转换) 2.常 ...

  6. shell脚本调试

    转自:http://www.ibm.com/developerworks/cn/linux/l-cn-shell-debug/ 一. 前言 shell编程在unix/linux世界中使用得非常广泛,熟 ...

  7. 小谈 - web模仿手机打电话与正则表达式

    昨天遇到了一个很棘手的问题,就是手机端调用web端的页面,如果用编辑器插入的内容页面中有电话的的数据就要变一下格式,让手机端可以实现拨号的功能. 研究了半天就是没一点头绪,但是偶尔看到数据中每一个电话 ...

  8. Visual Studio 2013 错误提示“未找到与约束匹配”的修正

    昨天由于项目需要,在开发电脑上安装了Microsoft Office Project 2007来做时间计划,但是安装之后第二天重新打开VS之后,就无法打开项目或者原有程序文件无法打开.错图提示界面如下 ...

  9. log4net按时间日期，文件大小和个数生成日志文件

    从启动模板生成的基于ABP的应用默认使用的log4net日志框架,当然你也可以使用其他的日志框架. ABP默认的log4net.config配置文件配置的很简单,将所有的日志都写到了一个txt文件中, ...

  10. 【C语言学习】《C Primer Plus》第4章 字符串和格式化输入/输出

    学习总结 1.String str=”hello world!”;(Java),char[20]=” hello world!”;(C).其实Java字符串的实现,也是字符数组. 2.字符串的尾部都会 ...