2021-8-4 快手面试(一)

1、两个兄弟盒子上下分布，margin分别为20px和30px ，问两个盒子间距。

这是盒子塌陷问题。由于盒子是兄弟盒子，所以30px直接覆盖了20px，此时两个盒子的距离是30px

2、p标签加上position：absolute属性后发生什么变化。

<span>111</span>
<p>222</p>
<span>333</span>

没加上的时候是

111

222

333

加上后是

111 333

222

span标签是行内元素，p标签添加absolute后就像添加了float。

3、css的选择器权重的比较

！important>id>类>元素

4、以下代码输出了什么

for (var i = 0; i < 3; i++) { 
 document.body.addEventListener('click', function(){
        console.log(i)
    })
}

此时输出333

var是全局作用于，会有一个变量提升，也就是说这里的i全局都可以使用。在for中的赋值也是全局下的赋值。但是里面的函数只能访问到跳出for循环时的i值（就是i的最终值），for循环了3次所以输出3个3

for (let i = 0; i < 3; i++) { 
 document.body.addEventListener('c   lick', function(){
        console.log(i)
    })
}

此时输出012

let是块级作用域也理解为函数作用域，这里的i只用于for循环中，而且每次都参与到函数体内。

5、使用js来写驼峰命名法：

使 "get-element-by-id" 变为 getElementById

var name = "get-element-by-id"
function changName(){
	var arr = name.split('-');
	for(let i = 1; i < arr.length; i++){
		arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substring(1)
	}
	return arr.join('');
};
changName(name);

用到了五个方法：

split(’-’)：以’-'将字符串分开

charAt[i]：获取返回索引为i的字符

toUpperCase()：字母转换为大写

substring(i)：获取从索引为i到结束的字符

join()：把数组中所有元素放入一个字符串

---

总结：第一次参加快手这样的大公司面试，属实没有考虑到会问的如此基础，也因此看到了我基础功夫的不足，以及对待前端细节处理的态度不是很严谨，希望以此为戒，现在抓紧时间重新补充漏洞，进行全面的复习和整改，再冲大厂！！！