近阶段前端面试问题汇总（css篇）

时间 2019-12-07

标签阶段前端面试问题汇总 css 栏目快乐工作繁體版

原文原文链接

经历了各类选择与被选择以后（其实就是被坑了），最终又离开了平静乃至颓废的划水岗位，从新跳入前端求职的大锅，继续翻腾。
在此记录一下被提问的问题吧(论水平也就是初级前端，因此不少问题也是挺简单的）。css

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

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有了更深刻的理解)：
问题到手的时候我是懵逼的，三角形？
回家后而后就度了一下获得了最简单的答案（此答案处处都有，我也是本身又写了一个就不贴出处了）flex

首先贴上代码
html:spa

<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;
        }

效果code

!!!∑(ﾟДﾟノ)ノ这是个啥？？？拿到了答案依旧是没有思路，好吧，那咱们先来看看些代码都作了什么。

如今咱们来看

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中其实还有许多值得深究的地方，等研究到时再来作些笔记吧。