09.26 腾讯校招前端一面经历
时间:2019-11-11
本文章向大家介绍09.26 腾讯校招前端一面经历,主要包括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>要点
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中的~
选择器。
<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. 如果是爷孙通信?假如是跨多层组件通信?
有多种方法解决
- 使用一个空的 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这个页面可以访问吗?
原文地址:https://www.cnblogs.com/jlfw/p/11834257.html
- Shell利剑之export、read和history
- css sprite 调整大张图片中小图标的大小
- Learn Git One
- Docker系列教程04-Docker镜像常用命令
- Linux 系统优化
- Spring Cloud Edgware新特性之九:Sleuth使用MQ方式整合Zipkin
- Linux 基础知识
- Spring Cloud Edgware新特性之八:Zuul回退的改进
- Install Django Nginx uWSGI
- Spring Cloud Edgware新特性之七:可选的EnableDiscoveryClient注解
- 【LEETCODE】模拟面试-46. Permutations
- CentOS6 Upgrade Python
- Emacs setup for Go Development
- 【LEETCODE】模拟面试-39. Combination Sum
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- (C99)复合字面量
- 排障集锦:九九八十一难之第十三难!-------------史上最全MySQL 单实例故障排查
- c语言数组越界的避免方法
- 单片机的存储区范例
- 大点干!早点散----------Nginx+Tomcat动静分离
- 大点干!早点散----------深入剖析缓存加速--squid传统代理和透明代理
- stm32 HardFault_Handler调试及问题查找方法——飞思卡尔
- 堆栈的分布
- memset()函数的使用
- 质量保障的方法和实践
- Selenium4 IDE,它终于来了
- strtol函数的用法——字符串转长整形
- JsonPath工具类封装
- Ubuntu16.04 实时内核 RT Preempt 安装
- c语言实现整数转换为字符串——不考虑负数