近日,腾讯公司的css笔试题陆续在网络上曝光,引起了不少程序员的关注。本文将对该笔试题进行介绍,并结合代码进行解析。
首先是该笔试题的题目:
写出一个可以让下列元素水平居中,垂直居中的布局 <div class="parent"> <div class="child"></div> </div>
这个题目看似简单,实际上涉及到了css布局中的经典难点。下面我们来看一下代码。
.parent { display: flex; justify-content: center; align-items: center; } .child { width: 100px; height: 100px; background-color: red; }
通过设置父容器的display属性为flex,以及设置justify-content和align-items属性为center,我们可以将子元素在水平和垂直方向上居中对齐。同时,我们可以通过设置子元素的宽度和高度来控制其大小。
以上就是腾讯公司css笔试题的解答方法。当然,这只是其中一种解法,在实际开发中还有许多其他的布局方案可以实现同样的效果。