早上投了淘寶網的簡歷，中午就收到郵件通知了，下午就打電話進行電話面試，很有效率。
大致總結一下，電話面試，先是問一下目前的生活狀況，然後到主要的技術面試，能答上很多問題，也有很多問題回答不上來，我是屬於讓我寫一個網站會寫，原理什麼我不懂的人，還有原生態的js也一竅不通。我面試的是csser，對於淘寶而言，他們要的是前端開發，而我現在還很薄弱，腳本這塊一直是我的軟肋，但css這塊我又不是很精通，就是會寫效果，在小公司裏，別人不管你怎麼實現，不管你的代碼寫的怎麼樣，只看最後效果。
不管這次有沒有通過，對自己也有個小警示，原來自己的水平也就一般般，之前在msn上攜程網的面試，我更是不戰而敗，當時發來一份面試題，我還不習慣特意去做題，無從下手，最後就不了了之。。
覺得有時候機會錯失也蠻可惜的，只是自己的技術一直沒提高，哎，，得好好加油了，不要每天喊喊口號。對於css的技術要去了解，而不是隻會做，不知道爲什麼要這樣做。。
關於面試問題，遇到幾個問題：
1，ie有幾種渲染方式，後來我才知道是bug。只記得雙倍邊距等幾個ie6的問題，解決辦法就是用hack解決；
上網查了一下，還有幾種渲染方式，如下：
- 1. size,padding和margin距離異常
- 在IE6中,各種size,padding和margin總是感覺怪怪的,有時候死活差那麼幾個像素.這時候可以使用單獨爲IE準備的CSS文件來糾正.只需要在頁面頭部加類似這樣的CSS文件即可:
- 2. <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" />
- 3.<![EndIf]-->
- 其中的ie.css是對主CSS文件中,那些在IE6下顯示異常的元素,重新定義的CSS.
- 2. 塊元素居中問題
- 在現代瀏覽器中,一個塊元素,假設是一個p,設置了寬度,設置左右margin都是auto之後,渲染效果應該是居中.但是在IE中,必須對其父元素,假設是body,加text-align:center;才能看到居中效果:
- 1.body { text-align: center; }
- 並且,你還要在子元素p裏把繼承的居中糾正回來:
- 1.p { text-align: left; }
- 3. div最小高度不能低於12px的bug
- 如果你需要一個高度很小的div,假設說做一個分隔線之類,你會發現div最小高度不會低於12px.這時候要設置div的line-height: 0;才行.
- 1.<div style="line-height: 0px; height: 2px;"></div>
- 如果還是不行,你要在div裏套一個p,並且指定這個p的line-height: 0;.
- 1.<div style="height: 2px;"><p style="line-height: 0px;"></p></div>
- 4. 浮動元素的雙倍margin距離bug
- 這是一個非常嚴重的bug.你會發現你的側邊欄總會跑到第二行去顯示,或者明明你計算好寬度,平分兩半,還預留了些空隙,在Firefox顯示正常,在屏幕左右分佈的兩個塊元素,在IE下非換行不可.說起來應當是IE的float塊元素,margin加倍渲染的bug.
- 這樣的代碼:
- 1..floatbox {
- 2. float: left;
- 3. width: 150px;
- 4. height: 150px;
- 5. margin: 5px 0 5px 100px;
- 6. /*This last value applies the 100px left margin */
- 7.}
- 正確的渲染應該是這樣:
- marg-norm
- 但是在IE5和IE6裏,margin的100px被加倍,渲染成這個樣子:
- marg-doubled
- margin被加倍成了200px.
- 浮動元素的雙倍margin距離bug的出現條件和特點是:
- float塊元素
- margin方向與float方向相同,即float: left;的塊只會加倍margin-left的值.
- 這個float塊與其父容器的內邊之間夾着這個margin的情況下,纔會加倍.當前行的第二個float塊,因爲其左邊不是父容器的內邊,就不會出現這個bug.
- 浮動元素的雙倍margin距離bug具備左右對稱性.
- 修復很簡單,在所有float的元素的CSS中加入display: inline;即可.其實根據W3C對float的定義,當float具備left或者right時,display效果應當是不起作用的,除非是display: none;,但是指定了display: inline;確實讓IE6正確顯示了margin.
- 5. 盒模型的bug
- 看這樣一段代碼:
- 1.div#box {
- 2. width: 100px;
- 3. border: 2px solid black;
- 4. padding: 10px;
- 5.}
- 根據盒模型定義,這個div的寬度應該是2+10+100+10+2=124px.大部分瀏覽器也是這樣解析的,唯獨IE6認爲它是100px寬.
- 這個bug會對佈局帶來嚴重影響.消除這個bug只需要在頁首制定DTD即可.
- 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 此前的一篇文章這樣解釋:在頁首制定了DTD,瀏覽器就認定Web開發者知道並理解DTD,於是就會使用兼
- 容標準的方式來解析和渲染頁面.
2，一個body中，有左右兩列，除了float之外，還能用什麼方法佈局？
我就想到定位
3，選擇器的優先權
id選擇器最優先
4，如何把重要的代碼放帶頁面頭部，不影響頁面佈局？這個我還真不知道哦，他看我看一下taobao的首頁，我好像沒發現什麼特別呀？？求解
5，有一個div中有很多p元素，設置p元素爲浮動，這個div的高度？
一時沒想出來，原來是沒有高度，這個很簡單的問題。居然當時沒想到，如果解決它的無高度問題，加一下clearfix，這個我從來都是網上找的，他一問我內容，我就依稀記得，好像有height=1%和clear：both。。
6，還有幾個問題，現在想不起來啦。。
攜程網的面試題之一：
有興趣的同學可以試試噢。。