9.20 前端面试问题总结

最新推荐文章于 2022-08-19 10:02:51 发布

板栗栗

最新推荐文章于 2022-08-19 10:02:51 发布

阅读量96

点赞数

分类专栏：面试笔试

本文链接：https://blog.csdn.net/weixin_44769310/article/details/101155000

版权

面试笔试专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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 接收方法。

2.为什么要用到vuex？

关于vuex详细的介绍可以参看：

为什么使用vuex以及其核心概念

解答：

我们把组件的共享状态抽取出来，以一个全局单例模式管理。在这个管理模式下，我们任意组件都能获取状态或者触发行为。

我们什么时候会用到vuex呢如果不打算开发大型单页应用，使用vuex可能是繁琐的。如果是中大型单页应用，考虑到如何更好地在组件外部管理状态，就会使用到vuex。

板栗栗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9.20 前端面试问题总结

9.20 前端面试问题总结CSS1.用CSS画三角形2.CSS画正方形的四个角（红色的线）3.margin设置为负有什么效果？可以实现什么？VUE1.vue组件之间通信的方法和原理？2.为什么要用到vuex？CSS1.用CSS画三角形已经单独写出来了：CSS画三角形主要就是用border来画三角形2.CSS画正方形的四个角（红色的线）这里要用到伪类：nth-child,平时经常遇到的...
复制链接

扫一扫