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

邹强发布于2019-08-30 11:11 / 955人阅读

摘要：在此记录一下被提问的问题吧论水平也就是初级前端，所以很多问题也是挺简单的。为了直观和调试的方便，我们把属性这么写其实对于作三角形这一目的，边框的风格并不重要，所以在这里不多做研究。

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

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:

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

专线服务 idc机房托管嵌入式c语言面试汇总问题汇总号码隐私保护常见问题汇总面试问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114827.html

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
前端最强面经汇总

摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

wangjuntytl 2019-08-26 10:41 评论0 收藏0
Web前端开发学习推荐--菜鸟必看

Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

JerryWangSAP 2019-08-02 15:21 评论0 收藏0
Web前端开发学习推荐--菜鸟必看

Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

shadajin 2019-08-19 11:45 评论0 收藏0