面試經(jīng)過

今天去了某家面試。之前公司打電話通知面試時，問我：“你簡歷上寫你是xx軟件學(xué)院的，這是xx大學(xué)下設(shè)的三本嗎？”，我：“……”。

一個大寫的服！

去了面試地點(diǎn)，看到會議室里早已坐滿大半，還稍有點(diǎn)方。一共兩位面試官，一位面技術(shù)，一位面……面……不知道怎么形容，面人品？

大家先筆試，7道題，還比較簡單。經(jīng)過前面兩次面試的劃范圍（Excuse me？?。?，我下筆如有小神，速度答完~

等待面試

然而，之后畫風(fēng)突變……

之前的兩次面試，都是我一個人面對面試官，基本上是筆試完直接面試（然后直接走人= =）；而這次是大家筆試之后挨個面試，于是我看到了很多畫風(fēng)詭異的哥們兒：

• 退役小哥
• 淘寶店主
• 培訓(xùn)機(jī)構(gòu)學(xué)員*N
• 經(jīng)理/項(xiàng)目助理*N

面試人品環(huán)節(jié)，這些哥們兒被問了諸如：“你高中是體育生啊，喜歡運(yùn)動嗎？”、“你之前做經(jīng)理助理，酒量怎么樣??？”這樣的問題。

已方

總之，之前沒有被問過非技術(shù)問題我，見到這樣的style感覺有點(diǎn)新奇。

面試題

面試題比較簡單，有七道：

1. 寫出html的行內(nèi)元素和塊級元素，并說明它們有什么區(qū)別?？梢詫?nèi)聯(lián)元素設(shè)置margin和padding嗎？
2. 如何實(shí)現(xiàn)垂直居中
3. 什么是優(yōu)雅降級和漸進(jìn)增強(qiáng)
4. 清除浮動有哪些方式，有什么優(yōu)缺點(diǎn)
5. 寫一個函數(shù)，返回文件名的類型
6. 實(shí)現(xiàn)一個可自定義樣式的下拉列表的jQuery插件
7. 用原生JS實(shí)現(xiàn)深拷貝對象的Clone方法

面試題解答

回學(xué)校后，我照例整理了面試題，查了查答案。以下答案經(jīng)網(wǎng)上搜索而來：

1. 寫出html的行內(nèi)元素和塊級元素，并說明它們有什么區(qū)別?？梢詫?nèi)聯(lián)元素設(shè)置margin和padding嗎？

行內(nèi)元素/內(nèi)聯(lián)元素(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

可變元素（根據(jù)上下文語境決定該元素為塊元素或內(nèi)聯(lián)元素）：applet button del iframe ins map object script

區(qū)別：塊元素一般都從新行開始，可以容納行內(nèi)元素和其他塊元素；沒有css作用的情況下，塊元素會以每次另起一行的方式一直往下排；內(nèi)聯(lián)元素只能容納文本或其他內(nèi)聯(lián)元素。

對內(nèi)聯(lián)元素設(shè)置margin和padding并不會有效果，因?yàn)樵氐膌ine-hight并未變化。

2. 如何實(shí)現(xiàn)垂直居中（以下方法還沒來得及測試）

<--! 方法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;
}

3. 什么是優(yōu)雅降級和漸進(jìn)增強(qiáng)

優(yōu)雅降級：根據(jù)最高級、最完善的瀏覽器設(shè)置網(wǎng)站。一開始就構(gòu)建站點(diǎn)的完整功能，然后針對瀏覽器測試和修復(fù)。

漸進(jìn)增強(qiáng)：關(guān)注內(nèi)容本身。一開始只構(gòu)建站點(diǎn)的最少屬性，然后不斷針對各瀏覽器追加功能。

補(bǔ)充——自適應(yīng)和響應(yīng)式：自適應(yīng)布局主要是寬度自適應(yīng)，后來開始用CSS hack技術(shù)適應(yīng)各種瀏覽器；放棄hack技術(shù)，使用漸進(jìn)增強(qiáng)的開發(fā)方式，就發(fā)展成了流式布局。

4. 清除浮動有哪些方式，有什么優(yōu)缺點(diǎn)(詳見我的博文)

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

1. 在子元素最后添加一個HTML節(jié)點(diǎn)：

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

  3.使用:after偽類

  4.使用:before :after

5. 寫一個函數(shù)，返回文件名的類型

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

6. 實(shí)現(xiàn)一個可自定義樣式的下拉列表的jQuery插件

這道題！答應(yīng)我！一定要看這個！一定要感謝下原作者！

好吧這道題我不太會，為了加深記憶還是手動敲一遍（Excuse me？?。?/p>

<ul class="list">
  <li>導(dǎo)航列表1
      <ul class="nav">
          <li>導(dǎo)航列表1.1</li>
          <li>導(dǎo)航列表1.2</li>
          <li>導(dǎo)航列表1.3</li>
      </ul>
  </li>
  <li>導(dǎo)航列表2
      <ul class="nav">
          <li>導(dǎo)航列表2.1</li>
          <li>導(dǎo)航列表2.2</li>
          <li>導(dǎo)航列表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);

7. 用原生JS實(shí)現(xiàn)深拷貝對象的Clone方法

（……Zzzzzzz，不行太困了，明天早晨面試完再補(bǔ)充）