网传腾讯笔试前端方向问答题三题

今天在网上看到来自腾讯校招笔试前端岗位的三个问答题,好像问答题是整个笔试的重中之重啊。感觉都很有意思,写个文章来记录一下这三题,考得还比较经典。

三道题全是CSS,而且全是CSS领域的一些重要经典问题,很值得记忆与学习。没有实战经验的人对这三题应该是一头雾水,区分度会很大的,所以我一直是以项目经验为主的方式来驱动自己学习,毕竟很多东西在学校里做那些作业看那些课本你确实真的不会遇到。

项目里才有多变的问题,遇到这些问题之后自然会第一时间去找这些多变问题的解法,以解决问题,下次再遇到自然就不是问题了。

题1

题1考查的是清除浮动,浮动元素是不占空间的,脱离文档流,这会导致处于正常文档流的父元素容器高度塌陷,影响整个程序的样式。我们要做的是让通过清除浮动父元素能够获取内部浮动元素的高度,不发生高度塌陷。

题1要提出三种方法,看到题目首先就想起clearfix,遂有如下代码:

1
2
3
.clearfix {
clear: both;
}

然后在需要清除浮动的容器上添加一行HTML:

1
<div class="clearfix"></div>

就能清除浮动,这是第一种,也是最常见的方案,是骨灰级的解决办法。但是我给出的代码不是完美的,要加一个div才能解决问题,这个会破坏HTML的结构,很不雅观。

更好的解决方法是利用CSS的伪元素,伪元素是个好东西。其实clearfix的最佳解决方案在Bootstrap里就可以找到:

1
2
3
4
5
.clearfix::after {
display: block;
clear: both;
content: "";
}

这个方法对旧版本IE的兼容不到位,旧版本IE还要写一些其他东西,不过这应该不在考察范围内了。

第二种是通过overflow控制,可以做这样一个类:

1
2
3
4
.clearfix-overflow {
overflow: auto;
// 也可以是overflow: hidden; 该行对IE有更好的兼容性
}

同样把这个类添加到需要消除浮动的容器上即可。这个是基于BFC来消除浮动的方式。感觉不怎么常用,而且改overflow可能会影响到样式,上面的clearfix更常用。

这个题的难度在于,这两种很常见不难想,难就难在你还要再给一种。

一时间我也很难想到第三种,其实第三种可以由第二种方法衍生出来,同样是利用BFC,比如父子元素都有float属性、父子元素的位置都为absolute、fixed等。

还有做法是可以把父元素的display设置成flex、inline-flex、inline-block等。这种方法要注意父子元素CSS的一致性,不是乱设的。

当然也可以从第一种方法衍生出来,即利用伪元素作用于作为父元素的容器,这可以被看作是一种新方法。

题2

这道题一眼看过去有点蒙,仔细想一下应该用浮动做。题目存在一个不可忽略的限制 —— “中间一列需要优先加载”。这个意味着HTML的结构一定是main在前,left、right在后,不可改变,所以用浮动做。

1
2
3
4
5
6
7
8
9
10
11
.left {
width: 100px;
float: left;
}
.main {
width: auto;
}
.right {
width: 100px;
float: right;
}

当然,中间那个元素也可以调整为这样:

1
2
3
.main {
margin: 0 100px;
}

看似100px是写死的,但是实际上这100px是两侧,中间部分仍然是自适应宽度。这样做更不灵活,需要改3个数值,但在实战中更常见。

完美主义者可以考虑用预处理器的mixin解决问题。

题3

CSS的经典问题,《CSS揭秘》一书有特别提到这个问题。

第一种方案是用绝对位置,方案如下:

1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

千万不要漏掉父元素的位置定义,否则这将是个灾难。这是一个通法,很常见。

第二种方案是用flex,利用其特性实现垂直居中。子元素不需要设置,给父元素设置即可。

1
2
3
4
5
.parent {
display: flex;
justify-content: center;
align-items: center;
}

稍有一些实战经验一定会遇到垂直居中这个老大难问题,一定会知道至少一种解法,如果是要做前端的话,但凡是有点深入学习过CSS的也必然会知道这两种解法,这道题纯属送分。