这段代码还是不大懂

相关代码：

.nav-container{
    overflow: hidden;
    height: 0;
    border-bottom: 1px solid #dadada;
    transition: height 0.5s;
    position: relative;
    top: -1px;
}
.nav-container-extended{
    height: 201px;
    top: 0;
}

请你摘掉伪善的面具 2021-08-04

源自：响应式布局 4-3 导航区

收起

2回答

好帮手慕星星 2021-08-05 10:29:30

同学你好，问题解答如下：

1、底边框是在top为-1的时候设置的

即使改变top为0，又没有改变边框样式，所以仍然显示。

2、top为-1的时候并不是消除底边框，而是上移后盖住了顶部的底边框，看着只有一条。顶部和下拉菜单都设置了底边框，如果设置top为0，在没有内容的情况下，两个边框会挨着（老师给两个边框都改变了颜色，蓝色和红色，看着明显一些）

但是我们只想要一条，所以设置top为-1，上移元素，下拉菜单底边框盖住顶部底边框。就像两个元素遮盖一样，例如：

自己再理解下，祝学习愉快！

收起回答

好帮手慕星星 2021-08-04 14:00:31

同学你好，这部分是给下拉导航添加动画效果。点击按钮时会添加nav-container-extended类

所以初始给nav-container类设置高度为0，添加高度过渡属性

当点击按钮后，nav-container-extended类中高度为210px，这样就会有高度的过渡效果。

而top值初始设置为-1，是因为有底边框。高度为0，有底边框看着不美观，所以上移了。扩展之后top正常为0

自己再测试理解下，祝学习愉快！

收起回答

提问者请你摘掉伪善的面具 #1

我想知道当top：0的时候，为啥会有底边框呢，这到底是哪个css代码在起作用，top：-1就可以消除底边框，这是css的规定还是有别的道理？

2021-08-04 20:15:06

相似问题

这个还是不太懂，麻烦解释下？？

为什么要先判断 i==0 这段代码看不懂

这段代码有点理解不了

老师，有段代码看不懂

老师，为什么我这个默认值设置不了中文呢，换成数字就可以

登录后可查看更多问答，登录/注册

前端工程师2020

参与学习人
提交作业 7878 份
解答问题 15282 个

前端技术快速更迭，人才紧缺。带你从0基础开始，成为Web全栈工程师，转行就业更顺畅。

了解课程

本课精华内容

问答作业

老师，我在xhr.send()出错了

92 2

老师好，这里虽然老师给了方法，但我想问问关于定位后的宽高

44 2

函数里面的参数是函数,那么里面作为参数的函数是如何调用的?

74 4

老师请检查

30 1

老师，关于ctx.set()我存在困惑

32 1

查看更多本课问答

请稍等 ...

这段代码还是不大懂

这段代码还是不大懂

正在回答回答被采纳积分+1

请选择置顶位置