9.20 前端面试问题总结

最新推荐文章于 2023-11-02 05:04:03 发布

原创最新推荐文章于 2023-11-02 05:04:03 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

面试笔试专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了前端CSS技巧，包括使用CSS绘制三角形和正方形边角的创新方法，以及解析margin负值的布局效果。同时，文章阐述了Vue组件间的通信策略，包括props、emit和vuex的应用场景，为读者提供了实用的前端与Vue开发指南。

9.20 前端面试问题总结

CSS
VUE
- 1.vue组件之间通信的方法和原理？
- 2.为什么要用到vuex？

CSS

1.用CSS画三角形

已经单独写出来了：CSS画三角形
主要就是用border来画三角形

2.CSS画正方形的四个角（红色的线）

在这里插入图片描述
这里要用到伪类：nth-child,平时经常遇到的伪类是:hover，如果对伪类还不熟悉的话请看

代码：

<body>
    <div class="main">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

<style>
.main{
    position: relative;
    width: 200px;
    height: 200px;
    border: 2px solid black;
}
.main span:nth-child(1){
    position: absolute;
    left: -5px;
    top: -5px;
    padding: 15px;
    border-style: solid;
    border-color: red;
    border-width: 5px 0 0 5px;
}
.main span:nth-child(2){
    position: absolute;
    right: -5px;
    top: -5px;
    padding: 15px;
    border-style: solid;
    border-color: red;
    border-width: 5px 5px 0 0;
}
.main span:nth-child(3){
    position: absolute;
    right: -5px;
    bottom: -5px;
    padding: 15px;
    border-style: solid;
    border-color: red;
    border-width: 0 5px 5px 0;
}
.main span:nth-child(4){
    position: absolute;
    left: -5px;
    bottom: -5px;
    padding: 15px;
    border-style: solid;
    border-color: red;
    border-width: 0 0 5px 5px;
}
</style>

效果图：
在这里插入图片描述
只要弄清楚position:relative与border就可以了，如果想要得到题目中给的效果，只需要每个span的top\right\bottom\left改远一点即可。

3.margin设置为负有什么效果？可以实现什么？

参考资料：

margin负值和布局

首先要注意：

负margin绝对是标准CSS
如果不使用float，负margin是不会破坏页面的文档流

负margin的效果：

作用在static元素时
在上和左方向上margin-top/left设置为负值，元素被上移或者左移
在下和右方向上margin-bottom/right设置为负值，将文档流后的元素拉进来，覆盖本来的元素

VUE

1.vue组件之间通信的方法和原理？

vue通信传值的方法有很多，具体可以参看vue通信、传值的多种方式（详细）。但是这里问的是组件之间通信有哪几种方法，只用说清楚有哪几种情况并且通过什么传值就可以了。

父对子传值： 通过属性props传值
子对父传值： 通过emit事件传值
兄弟组件传值： 小项目通过eventBus来传值，大项目通过vuex来传值。
eventBus： 解释一下就是事件车（具体步骤课看参考资料），简单来说就是定义一个新的vue实例eventBus专门用于传递数据并且导出，组件A引入eventBus，通过 $emit 定义方法名和传输的数据。在组件B引入eventBus，通过 $on 接收方法。