#前端开发避坑技巧002# 【二】（路由、页面跳转、底部板块浮动问题、盒子的浮动问题、如何通过定位来调整盒子的位置、子组件与父组件的关系、排版的问题、CSS伪类选择器nth-child）

最新推荐文章于 2024-01-22 00:25:43 发布

Miraitowa_chole

最新推荐文章于 2024-01-22 00:25:43 发布

阅读量424

点赞数 2

分类专栏：前端避坑技巧文章标签： css vue.js html 大前端 npm

本文链接：https://blog.csdn.net/ZHENGCHUNJUN/article/details/117110485

版权

前端避坑技巧专栏收录该内容

4 篇文章 3 订阅

订阅专栏

#前端开发避坑技巧002

路由、页面跳转、底部板块浮动问题、盒子的浮动问题、
如何通过定位来调整盒子的位置、子组件与父组件的关系、
排版的问题、CSS伪类选择器nth-child

（1）点击页面上的图片，跳转到另一个页面
只需要在图片上加一个路由，就可以解决
反正就是找对应关系

<rounter-link></rounter-link>

因为路由相当于一个a标签，点击即可
直接上代码

  <div class="course-box">
            <router-link :to="url">
                <img src="/static/image/course.png" alt="" >
            </router-link>
        </div>


<script>
import ArticleTitle from "./ArticleTitle";

export default {
    name: "course",
    components: {ArticleTitle},
    data () {
        return {
            url:'/library'
        }
    }
}

</script>

（2）底部板块浮动问题

页面底部的版块会浮动到中部位置，
有一个原因可能是你在前面的位置加了浮动，导致盒子脱离了文档流，
所以下面的盒子就会顶到前面去，所以需要清除浮动的影响

（3）盒子的浮动问题
如果子盒子要在父盒子里面进行浮动的话，一定要给父盒子加宽和高

（4）如何通过定位来调整盒子的位置
子盒子如何在父盒子中居中、居下等显示，使用定位的方法（子绝父相）

第一种情况：子盒子垂直居中显示

父盒子代码：
使用绝对定位position: relative;

.box {
    margin: 0 auto;
    position: relative;
    min-height: 36px;
    width: 416px;
    height: 234px;
    border-radius: 5px;
}

子盒子的代码：
使用相对定位position: absolute;
然后把上下左右全部设置为0即可

.box2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 416px;
    height: 234px;
    background: #333333;
}

第二种情况：子盒子垂直居下显示

父盒子代码：
使用绝对定位position: relative;

.box {
    margin: 0 auto;
    position: relative;
    min-height: 36px;
    width: 416px;
    height: 234px;
    border-radius: 5px;
}

子盒子的代码：
使用相对定位position: absolute;
然后把左右下全部设置为0即可
因为如果是垂直居下的话，那就是在父盒子的下方显示，
那距离上面肯定是有高度的，所以这个时候不需要设置top

.box1 {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     width: 416px;
     height: 66px;
     background: #333333;
     border-radius: 5px;
     opacity: 0.4;
 }

第三种情况：子盒子垂直居上显示

父盒子代码：
使用绝对定位position: relative;

.box {
    margin: 0 auto;
    position: relative;
    min-height: 36px;
    width: 416px;
    height: 234px;
    border-radius: 5px;
}

子盒子的代码：
使用相对定位position: absolute;
然后把左右上全部设置为0即可
因为如果是垂直居上的话，那就是在父盒子的上方显示，
那距离下面肯定是有高度的，所以这个时候不需要设置bottom

.box1 {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     margin: auto;
     width: 416px;
     height: 66px;
     background: #333333;
     border-radius: 5px;
     opacity: 0.4;
 }

（5）子组件与父组件的关系

首先为什么会用到子组件和父组件？
那是因为在实际的开发过程中，
为了美观以及一些版块是系列性，
以及为了能够更加高效地进行开发，我们会通过父子组件来进行操作，简化代码

它们之间的步骤以及关系是这样的：

一般这些可以复用的子组件，
我们会在components里面再建一个文件夹，
进行放置这些子组件

首先，我们先创建一个子组件的vue文件名
这里我们创建为“ArticleTitle.vue”
ArticleTitle.vue的中创建props，然后创建一个名为ArticleTitle的变量属性
在父组件“meeting.vue” 这个文件里面，注册子组件
并在template中加入child标签（此处为），再通过v-bind进行绑定属性并赋值
通过data里面，return一个值，传回给子组件

（6）父子组件对应关系

里面的这几个值一定要相对应

子组件里面的：
在这里插入图片描述
父组件里面的：

圈蓝的这些位置，必须是同一个数值

（7）报错问题常见：

在页面里面，一定要加上一个最大的div进行包裹
比如今天你在公司的电脑里面，有加了一些插件。例如动画、element在ws里面，那么你在其他电脑的ws里面，要先进行更新，就是要输入“npm update”

 <div class="meetings">
        <titleBanner v-bind:message="num"></titleBanner>
        <learnBox v-bind:newList="list" ></learnBox>
    </div>

（8）排版的问题：

CSS伪类选择器nth-child 选择x的倍数个元素写法

   ul li:nth-child(3n+3) {
       color: #ccc;
   }

上面的css是干什么用的，
它就是在无序列表里面选择是3倍数的列。也就是第3个，第6个，第9个等等。
但是它工作原理是怎样的那？如果遇到其它情况你又如何使用nth-child那？

总的来说nth-child()
圆括号里面支持两个关键词：even与odd。
他们应该很明显的，
even选择偶数标签，如第2、第4、第6等等。
odd选择奇数标签，如第1，第3，第5等等。
————————————————

一些常用的css伪类选择语法在这里插入图片描述
举个例子，就是我们想在页面上排成上下两行各8个的相同版型
那我们只需要设置同一行的最后一个盒子的magain-right为0就可以了
就是

.big-box {
    display: inline-block;
    width: 310px;
    height: 300px;
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(206, 206, 206, 0.5);
    border-radius: 5px;
    margin-right: 20px;
    margin-bottom: 28px;
}
.big-box:nth-child(4n){
    margin-right: 0;
}