09.26 騰訊校招前端一面經歷

1. 自我介紹

2. 對前端的理解

3. 爲何li中間會出現空隙

li{
    display: inline-block;
    background: red;
    width: 300px;
    height: 100px;
}
<div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
     </ul>
</div>

瀏覽器會把inline元素間的空白字符（空格、換行、Tab等）渲染成一個空格。而爲了美觀。咱們一般是一個 <li>放在一行，這致使 <li>換行後產生換行字符，它變成一個空格，佔用了一個字符的寬度。
解決：
方法一：爲 <li>設置 float: left。不足：有些容器是不能設置浮動，如左右切換的焦點圖等。
方法二：將全部 <li>寫在同一行。不足：代碼不美觀。
方法三：將 <ul>內的字符尺寸直接設爲0，即 font-size: 0。不足： <ul>中的其餘字符尺寸也被設爲0，須要額外從新設定其餘字符尺寸，且在Safari瀏覽器依然會出現空白間隔。
方法四：消除 <ul>的字符間隔 letter-spacing: -8px，而這也設置了 <li>內的字符間隔，所以須要將 <li>內的字符間隔設爲默認 letter-spacing: normal。

4. 實現圖片瀑布流(自適應多列)

在之前是須要用到js與css才能夠順利完成一個圖片瀑布流的實現，如今有了CCS3以後就能夠只用CSS樣式實現完美的自適應多列圖片瀑布流
<div></div>

要點
一、column-count 把div中的文本分爲多少列
二、column-width 規定列寬
三、column-gap 規定列間隙
四、break-inside: avoid; 避免元素內部斷行併產生新列
注意: Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。

/*瀑布流層*/
        .waterfall {
            -moz-column-count: 4;
            /* Firefox */
            -webkit-column-count: 4;
            /* Safari 和 Chrome */
            column-count: 4;
            -moz-column-gap: 1em;
            -webkit-column-gap: 1em;
            column-gap: 1em;
        }

        /*一個內容層*/
        .item {
            padding: 1em;
            margin: 0 0 1em 0;
            -moz-page-break-inside: avoid;a
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            border: 1px solid #000;
        }

擴展
CSS3多列屬性

• column-count 一行須要分割多少列
• column-gap 每一列的列距
• column-rule-style 列邊框樣式
• column-rule-width 列邊框寬度
• column-rule-color 列邊框顏色
• column-rule column-rule-* 全部屬性的簡寫。 如：column-rule: 1px solid #ccc(與border使用類似)
• column-span 指定元素跨越多少列
• column-width 指定列的寬度

5. css選擇器選擇一個表格中第二行第二列的td

能夠直接使用CSS3中的 :nth-child(n)選擇器。
:nth-child(n) 選擇器匹配父元素中的第 n 個子元素，元素類型沒有限制。n 能夠是一個數字，一個關鍵字，或者一個公式。

table tbody tr:nth-child(2) td:nth-child(2){
    background: red;
}

6. 從一個表格中第二行第二列的td開始以後的全部的td

我當時提出的是使用排除法，只要第二行第二列，也就是排除第一行第一列，因此就能夠直接使用 :not()排除就能夠了。不過當須要排除的行列更多時，這個方法明顯不行，所以能夠用第二種方法，CSS3中的 ~選擇器。
<div></div>
~選擇器
element1~element2 選擇器匹配出如今 element1 後面的 element2。
element1和 element2這兩種元素必須具備相同的父元素，但 element2沒必要緊跟在 element1的後面。

//能夠修改第幾行第幾列，即爲第n+1行第n+1列  這裏的n爲1
tr:nth-child(n)~tr>td:nth-child(n)~td {
    background: red;
}

7. 作移動端有沒有遇到兼容性的問題

8. 處理過canvas？

9. canvas跨域

10. canvas貝塞爾曲線

11. 點擊事件的生命週期？

經典問題，具體參考 javaScript事件流

12. 委託點擊事件對象的target與currentTarget是誰？

事件委託：事件委託就是利用事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件。
通俗來說就是把多個相同的子元素的點擊事件綁定到父元素上，利用時間冒泡的原理，點擊子元素最終都會冒泡到父元素，所以只把事件綁定在父元素判斷是哪一個子元素被點擊就能夠了。
<div></div>
舉個栗子
子節點實現相同的功能：

//  實現功能是點擊li，彈出123：
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

// 傳統的方法 須要經過循環對多個li進行時間綁定
window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}

//  事件委託的方式
//  Event對象提供了一個屬性叫target，能夠返回事件的目標節點，咱們成爲事件源，也就是說，target就能夠表示爲當前的事件操做的dom，可是不是真正操做dom，固然，這個是有兼容性的，標準瀏覽器用ev.target，IE瀏覽器用event.srcElement  
window.onload = function(){
            　　var oUl = document.getElementById("ul1");
            　　oUl.onclick = function(ev){
                　　　　var ev = ev || window.event;
                   　　　　var target = ev.target || ev.srcElement;
                　　　　if(target.nodeName.toLowerCase() == 'li'){
                　 　　　　　　    alert(123);
        　　　　　　　  alert(target.innerHTML);
                　　　　}
            　　}
}

target:觸發事件的某個具體對象，只會出如今事件流的目標階段（誰觸發誰命中，因此確定是目標階段）
currentTarget:綁定事件的對象，恆等於this，可能出如今事件流的任意一個階段中

13. 對vue的掌握

14. 父組件與子組件的通訊

也是一個經典問題，參考 Vue.js 父子組件及非父子組件間實現通訊

15. 若是是爺孫通訊？假如是跨多層組件通訊？

有多種方法解決

1. 使用一個空的 Vue 實例做爲中央事件總線
2. 使用Vuex
3. 使用localStorage和SessionStorage

16. localStorage與cookies區別？

相同點：均可以做爲瀏覽器存儲，且都不能進行跨域訪問；
不一樣點：

1. cookie始終會在同源 http 請求頭中攜帶（即便不須要），在瀏覽器和服務器間來回傳遞
2. localStorage 不會自動把數據發給服務器，僅在本地保存；
3. localStorage 存儲大小比cookie大得多，能夠達到5M或更大；
4. localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
5. cookie 設置的cookie過時時間以前一直有效，與瀏覽器是否關閉無關。

17. localStorage跨域問題？cookies跨域問題？

18. www.baidu.com/m/index.html ； m.baidu.com/n/index.html m設置了一個cookies，n這個頁面能夠訪問嗎？