近阶段前端面试问题汇总(css篇)

css3

浏览数:459

2019-6-22

经历了各种选择与被选择之后(其实就是被坑了),最终又离开了平静乃至颓废的划水岗位,重新跳入前端求职的大锅,继续翻腾。
在此记录一下被提问的问题吧(论水平也就是初级前端,所以很多问题也是挺简单的)。

css篇:
(一)如何实现未知宽高块级元素在父元素中上下左右居中:(普通问题就记录一下了)
1.绝对定位:

div{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}

2.table布局:
父级元素:

.parent{ display:table;}

子级元素:

.child{ display:table-cell;vertical-align:middle }

3.flex布局:
父级元素:

.parent{display:flex;flex-direction:row;justify-content:center;align-items:center;}

子级元素:

.child{flex:1}

(二)用css画一块三角形(这个问题有点刁钻,但是挺有趣,也算是对盒子模型和对border有了更深入的理解):
问题到手的时候我是懵逼的,三角形?
回家后然后就度了一下得到了最简单的答案(此答案到处都有,我也是自己又写了一个就不贴出处了)

首先贴上代码
html:

<body>
    <div class="sjx"></div>
</body>

css:

.sjx{
            width: 0;
            height: 0;
            border-width:0 30px 30px;
            border-style:solid;
            border-color:transparent transparent green;
        }

效果

!!!∑(゚Д゚ノ)ノ这是个啥???拿到了答案依旧是没有思路,好吧,那我们先来看看些代码都做了什么。

现在我们来看

width:0;
height:0;

由此可以看出其实三角形部分不是由content部分组成的,主要是由border部分组成。但是为什么要把content的宽高设置为0,我们先放一放。

来看border这几个属性:

border-width:0 30px 30px;/*设置了上边框为0,左右下边框为30px*/
border-style:solid;/*边框的风格是solid实线*/
border-color:transparent transparent green;/*上左右边框的颜色设为透明,下边框设置为绿色*/

看到这里依旧是有点摸不着头脑,先这样然后这样然后那样就可以这样了?

那就从头开始一点点分析吧,先看三个属性的官方解释:
border-width 简写属性为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 属性是一个简写属性,可设置一个元素的所有边框中可见部分的颜色,或者为 4 个边分别设置不同的颜色。
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

可以看出这三个属性其实都是分别设置其属性的简写,可以分别设置每个边框的属性。
为了直观和调试的方便,我们把属性这么写:

.sjx{
            width: 0;
            height: 0;
            border-top-width: 0;
            border-right-width: 30px;
            border-bottom-width: 30px;
            border-left-width: 30px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: green;
            border-left-color: transparent;
        }

其实对于作三角形这一目的,边框的风格并不重要,所以在这里不多做研究。
主要来看边框宽度border-width和边框颜色border-color;
这里我们分别尝试把border-right-width和border-left-width设置成0看一下效果:


这里在浏览器中调试过程中直观的可以看出无论是border-right-width还是border-left-width都似乎撑开了这个边框。那我们调高border-top-width会使三角形变高或者三角形变梯形吗?我们再调整border-top-width:


在这里我们就可以看出只是三角形顶部的空白被撑起来了,三角形本身并没什么变化。
好像发现了什么,由于我们这里把width和height设为了0,所以这就混淆了我们,我们把width和height还给这个div,同时给他一个背景色:

width: 20px;
height: 20px;
background-color: lightcoral;


这里的三角形变成了一个梯形,但是由于其他边框还是透明或者宽度为0,这个效果图还是会令人迷惑,我们就一步到位把其他边框的颜色和宽度还给他们:

.sjx {
            width: 20px;
            height: 20px;
            background-color: lightcoral;
            border-top-width: 30px;
            border-right-width: 30px;
            border-bottom-width: 30px;
            border-left-width: 30px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: yellow;
            border-right-color: cornflowerblue;
            border-bottom-color: green;
            border-left-color: sandybrown;  
        }

效果:

这下就一目了然了,其实当border有宽度时是一个梯形,而梯形什么时候会变成三角形呢,就是有一个平行边变成0的时候。其实这个题目考的还是对于盒子模型和border属性的理解。
这里还有大佬对于这种三角形更深入的探究:https://www.cnblogs.com/blosa…

目前需要记录的就是这两个css的问题,感觉面试过程中对于css的问题还是比较少,但是其实css中其实还有许多值得深究的地方,等研究到时再来做些笔记吧。

作者:LiLei