前端面试经历2: 一言难尽

面试经过

今天去了某家面试。之前公司打电话通知面试时，问我：“你简历上写你是xx软件学院的，这是xx大学下设的三本吗？”，我：“……”。

一个大写的服！

去了面试地点，看到会议室里早已坐满大半，还稍有点方。一共两位面试官，一位面技术，一位面……面……不知道怎么形容，面人品？

大家先笔试，7道题，还比较简单。经过前面两次面试的划范围（Excuse me？！），我下笔如有小神，速度答完~

等待面试

然而，之后画风突变……

之前的两次面试，都是我一个人面对面试官，基本上是笔试完直接面试（然后直接走人= =）；而这次是大家笔试之后挨个面试，于是我看到了很多画风诡异的哥们儿：

退役小哥
淘宝店主
培训机构学员*N
经理/项目助理*N

面试人品环节，这些哥们儿被问了诸如：“你高中是体育生啊，喜欢运动吗？”、“你之前做经理助理，酒量怎么样啊？”这样的问题。

已方

总之，之前没有被问过非技术问题我，见到这样的style感觉有点新奇。

面试题

面试题比较简单，有七道：

写出html的行内元素和块级元素，并说明它们有什么区别。可以对内联元素设置margin和padding吗？
如何实现垂直居中
什么是优雅降级和渐进增强
清除浮动有哪些方式，有什么优缺点
写一个函数，返回文件名的类型
实现一个可自定义样式的下拉列表的jQuery插件
用原生JS实现深拷贝对象的Clone方法

面试题解答

回学校后，我照例整理了面试题，查了查答案。以下答案经网上搜索而来：

写出html的行内元素和块级元素，并说明它们有什么区别。可以对内联元素设置margin和padding吗？

行内元素/内联元素(inline element)：a abbr acronym b do big cite code don em font i img input kdb label q s samp select small span strike strong sub sub sup texture tt u var

块元素(block element)：address block quote center dir div dl fieldset form h1/2/3/4/5/6 hr isindex menu noframe noscript ol p pre table ul

可变元素（根据上下文语境决定该元素为块元素或内联元素）：applet button del iframe ins map object script

区别：块元素一般都从新行开始，可以容纳行内元素和其他块元素；没有css作用的情况下，块元素会以每次另起一行的方式一直往下排；内联元素只能容纳文本或其他内联元素。

对内联元素设置margin和padding并不会有效果，因为元素的line-hight并未变化。

如何实现垂直居中（以下方法还没来得及测试）

<--! 方法1: 对居中的元素 !-->
.verticle-centered {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
<--! 方法2: 对居中的元素的父元素 !-->
.wrapper {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

什么是优雅降级和渐进增强

优雅降级：根据最高级、最完善的浏览器设置网站。一开始就构建站点的完整功能，然后针对浏览器测试和修复。

渐进增强：关注内容本身。一开始只构建站点的最少属性，然后不断针对各浏览器追加功能。

补充——自适应和响应式：自适应布局主要是宽度自适应，后来开始用CSS hack技术适应各种浏览器；放弃hack技术，使用渐进增强的开发方式，就发展成了流式布局。

清除浮动有哪些方式，有什么优缺点(详见我的博文)

对兄弟元素：直接clear: both;
对父子元素：

1. 在子元素最后添加一个HTML节点：

    ``` html
    <div style="clear:both"></div>  
    ```
 2. 对父元素使用overflow属性

  3.使用:after伪类

  4.使用:before :after

写一个函数，返回文件名的类型

function getFileType(fileName) {
  return fileName.substring(fileName.lastIndexOf('.')+1);
}

实现一个可自定义样式的下拉列表的jQuery插件

这道题！答应我！一定要看这个！一定要感谢下原作者！

好吧这道题我不太会，为了加深记忆还是手动敲一遍（Excuse me？！）

<ul class="list">
  <li>导航列表1
      <ul class="nav">
          <li>导航列表1.1</li>
          <li>导航列表1.2</li>
          <li>导航列表1.3</li>
      </ul>
  </li>
  <li>导航列表2
      <ul class="nav">
          <li>导航列表2.1</li>
          <li>导航列表2.2</li>
          <li>导航列表2.3</li>
      </ul>
  </li>
</ul>

;(function($){
  $.extend({
    "nav": function(color) {
        $('.nav').css({
            "list-style" : "none",
            "margin"    : 0,
            "padding"  : 0,
            "display"    : "none",
            "color"       : color
        });
        $('.nav').parent().hover(
            function() {
                $(this).find('.nav').stop().slideDown("down");
            }, function() {
                $(this).find('.nav').stop().slideUp("normal");
            });
    }
  });
})(jQuery);

用原生JS实现深拷贝对象的Clone方法

（……Zzzzzzz，不行太困了，明天早晨面试完再补充）