09.26 腾讯校招前端一面经历

BearyChat 发布于2019-08-23 12:09 / 2986人阅读

摘要：自我介绍对前端的理解为什么中间会出现空隙浏览器会把元素间的空白字符空格换行等渲染成一个空格。解决方法一为设置。方法二将所有写在同一行。选择器选择器匹配出现在后面的。和这两种元素必须具有相同的父元素，但不必紧跟在的后面。

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.  如果是爷孙通信？假如是跨多层组件通信？
有多种方法解决

使用一个空的 Vue 实例作为中央事件总线
使用Vuex
使用localStorage和SessionStorage


16.  localStorage与cookies区别？
相同点：都可以作为浏览器存储，且都不能进行跨域访问；
不同点：

cookie始终会在同源 http 请求头中携带（即使不需要），在浏览器和服务器间来回传递
localStorage 不会自动把数据发给服务器，仅在本地保存；
localStorage 存储大小比cookie大得多，可以达到5M或更大；
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
cookie 设置的cookie过期时间之前一直有效，与浏览器是否关闭无关。


17.  localStorage跨域问题？cookies跨域问题？
18.  www.baidu.com/m/index.html ； m.baidu.com/n/index.html  m设置了一个cookies，n这个页面可以访问吗？

GPU云服务器云服务器 web前端工程师校招腾讯云服务器的使用经历 java绘制一面国旗求职经历

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98023.html

09.26 腾讯校招前端一面经历

摘要：自我介绍对前端的理解为什么中间会出现空隙浏览器会把元素间的空白字符空格换行等渲染成一个空格。解决方法一为设置。方法二将所有写在同一行。选择器选择器匹配出现在后面的。和这两种元素必须具有相同的父元素，但不必紧跟在的后面。 1. 自我介绍 2. 对前端的理解 3. 为什么li中间会出现空隙 showImg(https://segmentfault.com/img/bVbhxip?w=131...

endiat 2019-08-02 11:35 评论0 收藏0
09.26 腾讯校招前端一面经历

摘要：自我介绍对前端的理解为什么中间会出现空隙浏览器会把元素间的空白字符空格换行等渲染成一个空格。解决方法一为设置。方法二将所有写在同一行。选择器选择器匹配出现在后面的。和这两种元素必须具有相同的父元素，但不必紧跟在的后面。 1. 自我介绍 2. 对前端的理解 3. 为什么li中间会出现空隙 showImg(https://segmentfault.com/img/bVbhxip?w=131...

stdying 2019-08-30 15:54 评论0 收藏0
2017暑期实习面试总结（前端方向）

摘要：的暑期实习面试到现在差不多都结束了，算下来自己也投了十几家简历，经历的差不多十场笔试，现场和电话面试也差不多有五六家公司。阿里三面三面不知道是不是交叉面，不过这次面试面试官说他是北京的之前都是杭州。 2017的暑期实习面试到现在差不多都结束了，算下来自己也投了十几家简历，经历的差不多十场笔试，现场和电话面试也差不多有五六家公司。虽然最后只拿到两个offer，所幸是自己期待的公司，下面从...

worldligang 2019-08-20 16:13 评论0 收藏0
10.26 酷狗音乐校招前端一面经历

摘要：安全性请求可被缓存，请求保存在浏览器历史记录中则不能被缓存。与相比，的安全性较差，因为发送的数据是的一部分。酷狗一面 1. 如何实现三栏布局（左右两边固定宽度，中间自适应）？使用flex布局：父元素设置display: flex，左右两边设置固定宽度，中间设置flex-grow: 1；使用浮动布局：左右两边设置固定宽度，而且分别设置float:left和right，这个方法有...

GitCafe 2019-08-23 12:35 评论0 收藏0