摘要：自我介紹對前端的理解為什么中間會出現(xiàn)空隙瀏覽器會把元素間的空白字符空格換行等渲染成一個(gè)空格。解決方法一為設(shè)置。方法二將所有寫在同一行。選擇器選擇器匹配出現(xiàn)在后面的。和這兩種元素必須具有相同的父元素，但不必緊跟在的后面。

li{
    display: inline-block;
    background: red;
    width: 300px;
    height: 100px;
}

    

      
1
      
2
      
3
      
4
     

瀏覽器會把inline元素間的空白字符（空格、換行、Tab等）渲染成一個(gè)空格。而為了美觀。我們通常是一個(gè)
放在一行，這導(dǎo)致
換行后產(chǎn)生換行字符，它變成一個(gè)空格，占用了一個(gè)字符的寬度。
解決：
方法一：為
設(shè)置float: left。不足：有些容器是不能設(shè)置浮動，如左右切換的焦點(diǎn)圖等。
方法二：將所有
寫在同一行。不足：代碼不美觀。
方法三：將
內(nèi)的字符尺寸直接設(shè)為0，即font-size: 0。不足：
中的其他字符尺寸也被設(shè)為0，需要額外重新設(shè)定其他字符尺寸，且在Safari瀏覽器依然會出現(xiàn)空白間隔。
方法四：消除
的字符間隔letter-spacing: -8px，而這也設(shè)置了
內(nèi)的字符間隔，因此需要將
內(nèi)的字符間隔設(shè)為默認(rèn)letter-spacing: normal。

在以前是需要用到j(luò)s與css才可以順利完成一個(gè)圖片瀑布流的實(shí)現(xiàn)，現(xiàn)在有了CCS3之后就可以只用CSS樣式實(shí)現(xiàn)完美的自適應(yīng)多列圖片瀑布流
要點(diǎn)
1、column-count 把div中的文本分為多少列
2、column-width 規(guī)定列寬
3、column-gap 規(guī)定列間隙
4、break-inside: avoid; 避免元素內(nèi)部斷行并產(chǎn)生新列
注意: 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;
        }

        /*一個(gè)內(nèi)容層*/
        .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;
        }

擴(kuò)展
CSS3多列屬性

column-count 一行需要分割多少列

column-gap 每一列的列距

column-rule-style 列邊框樣式

column-rule-width 列邊框?qū)挾?/p>

column-rule-color 列邊框顏色

column-rule column-rule-* 所有屬性的簡寫。 如：column-rule: 1px solid #ccc(與border使用相似)

column-span 指定元素跨越多少列

column-width 指定列的寬度

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

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

我當(dāng)時(shí)提出的是使用排除法，只要第二行第二列，也就是排除第一行第一列，所以就可以直接使用:not()排除就可以了。不過當(dāng)需要排除的行列更多時(shí)，這個(gè)方法明顯不行，因此可以用第二種方法，CSS3中的~選擇器。

~選擇器
element1~element2 選擇器匹配出現(xiàn)在 element1 后面的 element2。
element1和 element2這兩種元素必須具有相同的父元素，但 element2不必緊跟在  element1的后面。

//可以修改第幾行第幾列，即為第n+1行第n+1列  這里的n為1
tr:nth-child(n)~tr>td:nth-child(n)~td {
    background: red;
}

經(jīng)典問題，具體參考javaScript事件流

事件委托：事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。
通俗來講就是把多個(gè)相同的子元素的點(diǎn)擊事件綁定到父元素上，利用時(shí)間冒泡的原理，點(diǎn)擊子元素最終都會冒泡到父元素，因此只把事件綁定在父元素判斷是哪個(gè)子元素被點(diǎn)擊就可以了。

舉個(gè)栗子  
子節(jié)點(diǎn)實(shí)現(xiàn)相同的功能：

//  實(shí)現(xiàn)功能是點(diǎn)擊li，彈出123：

    
111
    
222
    
333
    
444


// 傳統(tǒng)的方法 需要通過循環(huán)對多個(gè)li進(jìn)行時(shí)間綁定
window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName("li");
    for(var i=0;i
target:觸發(fā)事件的某個(gè)具體對象，只會出現(xiàn)在事件流的目標(biāo)階段（誰觸發(fā)誰命中，所以肯定是目標(biāo)階段）
currentTarget:綁定事件的對象，恒等于this，可能出現(xiàn)在事件流的任意一個(gè)階段中

13.  對vue的掌握
14.  父組件與子組件的通信
也是一個(gè)經(jīng)典問題，參考Vue.js 父子組件及非父子組件間實(shí)現(xiàn)通信

15.  如果是爺孫通信？假如是跨多層組件通信？
有多種方法解決

使用一個(gè)空的 Vue 實(shí)例作為中央事件總線
使用Vuex
使用localStorage和SessionStorage


16.  localStorage與cookies區(qū)別？
相同點(diǎn)：都可以作為瀏覽器存儲，且都不能進(jìn)行跨域訪問；
不同點(diǎn)：

cookie始終會在同源 http 請求頭中攜帶（即使不需要），在瀏覽器和服務(wù)器間來回傳遞
localStorage 不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存；
localStorage 存儲大小比cookie大得多，可以達(dá)到5M或更大；
localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；
cookie 設(shè)置的cookie過期時(shí)間之前一直有效，與瀏覽器是否關(guān)閉無關(guān)。


17.  localStorage跨域問題？cookies跨域問題？
18.  www.baidu.com/m/index.html ； m.baidu.com/n/index.html  m設(shè)置了一個(gè)cookies，n這個(gè)頁面可以訪問嗎？