不得不承認，這次的面試官，我覺得都挺好，上午面試YY公司的面試官，態度親和力都很nice，說話務實，三個人一起面我（我還是第一次被三個人同時面，囧囧囧）。對於下午面試的XX公司，面試官目前是我最欣賞的一位，實在，嚴謹，修養很好，看的出來是位經驗豐富的大牛，為他不折不扣的追問細節而折服。說出來的思路沒用，寫代碼寫出來才是王道（所以，草稿紙都寫滿了），本來就煩手寫代碼，所以，關於一些選擇器命名之類很隨便，然而面試官很注重細節，給我指定名稱，規范格式，為我的不端正態度內疚，追問細節的過程中，確實學到不少東西。至少之前沒有引起重視，或者說，用到的很少的知識點，都被追問到，看來基礎知識還是有待加強。這里把面試過程中的問題總結一下。
一：先來看道js筆試題
貌似我寫錯了，把參數誤漏了。囧
var x=1; var y=1; method(8); alert(x+y);-后輸出5 function method(y) { x+=3; x為全局變量 y+=3; 參數y，這里僅僅是局部變量 alert(x+y);--先輸出15 }
考察知識點：函數聲明的方式，對於這種，先調用后聲明的形式，在js世不報錯的，但是如果是匿名函數將會報錯,原因是匿名函數沒有給出具體
的函數名js無法識別。在js里，聲明有三種。
方式一：
var text; var text=4;
這種方式，聲明的是全局變量，如果包裹在function里面，則為局部變量。
方式二：
text=4;
這種隱式的聲明一個變量，沒有給var，表示為全局變量，即使在function里面，也為全局變量。
方式三：
window.text;
window.text=4;
這種方式，經常用到一個匿名函數執行后將一些函數公開到全局。
全局變量的好處：可以減少變量的個數，減少由於實際參數和形式參數的數據傳遞帶來的時間消耗。
壞處：占用內存單元，破壞了函數封裝性，代碼可讀性降低。
二：寫了一道編程題，比較簡單，直接貼碼。忘記了，大概是這樣的
var oUl=document.getElementById("list"); var oLi=oUl.getElementsByTagName("li"); for(var i=0;i<oLi.length;i++) { oLi[i].index=i; oLi[i].onclick=function() { alert(this.index); } }
三：css中布局寬度，margin，padding的真實高度。
這個說實話，之前真沒注意，好細節的說啊！
先來看看代碼，：
<div class="test1" id="test1">test1</div> <div class="test2" id="test2"> <div class="test2_son">test2_son</div> </div>
css部分：
body{ margin:0px; } .test1{ width:150px; height:150px; border:6px solid red; } .test2{ margin-top:40px; padding-top:40px; width:150px; height:150px; border:6px solid gray; } .test2_son{ width:80px; height:50px; border:12px solid blue; }
那么如何檢測該div的真實高度和寬度呢？先來看下盒模型的分布圖
js代碼獲取它的實際寬度和高度如下所示：
var test1=document.getElementById("test1"); alert(test1.offsetHeight); --彈出162px=div實際高度+border-top的高度+border-bottom的高度 var test2=document.getElementById("test2"); alert(test2.offsetHeight); --彈出202px=div實際高度+border-top的高度+border-bottom的高度+padding的高度
所以，div的實際高度和寬度，主要包括padding+border+本身的div高/寬。
注：margin可為負數，padding不能為負數
之后老師拋起box-sizing的尺寸大小問題，這個我不是很清楚，回來查資料，這里總結一下。
四：box-sizing的問題
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。包括border-box|content-box(默認)|padding-box
先來看下代碼，比較一下它們之間的區別：
<div class="content-box"></div> <div class="padding-box"></div> <div class="border-box"></div>
css部分：
.content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; } .padding-box{ box-sizing:padding-box; -moz-box-sizing:padding-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: red; } .border-box{ box-sizing:border-box; -moz-box-sizing:border-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: yellow; }
實現效果如下：
現在我們來看下區別：
上面的三張圖，第一張width=150px;第二張為110px;第三張為100px,都包括border的寬度10px在內。
content-box：border和padding都計算入width之內,即width=100+20*2+10=150px;
會發現一個很奇怪的問題，此時的width明明只有100px.為什么在瀏覽器屏幕上顯示的變為了140px？
其實是因為padding的作用，它的width包括padding，所以我們看到的比100px大，而在正常的非box-sizing里面，即使設置了padding值
它依然只能顯示出100px.
padding-box：border計算入width內,即屏幕上顯示的width為：100px+5*2=110px;
border-box：border和padding的值都不計算在width之內.即顯示width=100px;
ie8+瀏覽器支持content-box和border-box；ff則支持全部三個值。
這里，我們在js代碼里面，看一下它的實際寬度，也是相對應的。
var contentBox=document.getElementById("content-box"); var paddingBox=document.getElementById("padding-box"); var borderBox=document.getElementById("border-box"); alert(contentBox.offsetWidth); --彈出150px alert(paddingBox.offsetWidth); --彈出110px alert(borderBox.offsetWidth); --彈出100px
簡單來說，box-sizing與我們平時的盒模型最大的區別就是，在瀏覽器屏幕上顯示的寬度不一樣。
五：git中涉及到的一些命令
列舉了一些經常用的命令，但有幾個不常用的搞忘記了，關於git常見命令可參考廖雪峰老師的文檔。
http://www.liaoxuefeng.com/的git教程。
六：關於塊級元素和行級元素
塊級元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table （p是塊級元素）
<div class="div1"> <div class="div2">4444</div> <span class="span">222</span> </div>
css部分：
.div1{border:1px solid red;} .div2{border:1px solid blue;} .span{border:1px solid green;}
實現效果如下：
可以看出，此時塊級元素div獨占一行，而行級元素span，在下面一行，只占據本身的寬度。
如果加上display:inline-block，則可使塊級元素和行級元素在同一行。
.div1{border:1px solid red;} .div2{border:1px solid blue;display:inline-block} .span{border:1px solid green;}
效果如下：
parseInt("11",2); //返回 3 (2+1) 進行2進制轉換 parseInt('1',0) = 1,
parseInt('2',1) = NaN, // 基數必須在2-36之間
parseInt('3',2) = NaN, //因為是2進制，所以數字必須< 2 ,如果滿2則進為0，跟10機制類似。
總結：
個人感覺，這次面試的公司，問的東西都很基礎，有些東西，自己不常用的知識點，都被問到了，還好，根據理解和殘留的記憶，基本上都回答出來了或者在面試官的引導下，答出來了。上午的面試官問到的js方面多，包括AJAX跨域，性能優化，http等。下午的面試官問到的基本都是css3方面的問題，讓你當場寫代碼，細節追問的很詳細。這次的面試，個人感覺很不錯，學到了不少東西。
作者：向婷風
出處：http://www.cnblogs.com/jtjds/p/5594305.html
如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作動力！歡迎各位轉載，但是未經作者
本人同意 轉載文章之后必須在 文章頁面明顯位置給出作者和原文連接，否則保留追究法律責任的權利。