09.26 腾讯校招前端一面经历

1. 自我介绍

2. 对前端的理解

3. 为什么li中间会出现空隙

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

    

      
1
      
2
      
3
      
4
     

浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观。我们通常是一个

放在一行，这导致

换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
解决：
方法一：为

设置 float: left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
方法二：将所有

写在同一行。不足：代码不美观。
方法三：将

内的字符尺寸直接设为0，即 font-size: 0。不足：
中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
方法四：消除
的字符间隔 letter-spacing: -8px，而这也设置了
• 内的字符间隔，因此需要将
• 内的字符间隔设为默认 letter-spacing: normal。

4. 实现图片瀑布流(自适应多列)

在以前是需要用到js与css才可以顺利完成一个图片瀑布流的实现，现在有了CCS3之后就可以只用CSS样式实现完美的自适应多列图片瀑布流

要点
1、column-count 把div中的文本分为多少列
2、column-width 规定列宽
3、column-gap 规定列间隙
4、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中的 ~选择器。

~选择器
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是谁？

事件委托：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
通俗来讲就是把多个相同的子元素的点击事件绑定到父元素上，利用时间冒泡的原理，点击子元素最终都会冒泡到父元素，因此只把事件绑定在父元素判断是哪个子元素被点击就可以了。

举个栗子
子节点实现相同的功能：

//  实现功能是点击li，弹出123：

    
111
    
222
    
333
    
444


// 传统的方法 需要通过循环对多个li进行时间绑定
window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i

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这个页面可以访问吗？