关于这个例子的几个问题

关于这个例子的几个问题

请问老师几个问题,基本都是关于高度设置的问题:

  1. 老师的nav的高是根据后面的nav-li设置的高度205px,但是我减小了这个高度之后并没发现变化。http://img1.sycdn.imooc.com//climg/5ce4f6790001642004760354.jpg然后我在浏览器中检查,发现nav的div确实小了,但是nav-li无视父级的高度限制,都显示了出来这是为什么?不是只有float可以无视父元素的高度限制吗?http://img1.sycdn.imooc.com//climg/5ce4f6520001d9de05460331.jpg

  2. 然后还有一个同样的情况出现在“三级栏目”的高度设置上,同样无视div的高度限制。我猜测是position的属性导致的这样的结果,因为对于二级栏目就不会出现这种情况,二级栏目的高度限制后就会出现下图的情况:http://img1.sycdn.imooc.com//climg/5ce4fc770001967a02730341.jpg

    3.还有一个高度的问题是老师讲课时候有一个情况就是在三级栏目还没有放到右侧而是在二级栏目底下的时候,图片如下:http://img1.sycdn.imooc.com//climg/5ce4fce400011a0502820410.jpg,根据前面这里ul的大小应该是自适应的,也就是说不管ul下有多少元素,高度都会增加,我也尝试了加多了二级栏目,我认为应该是可以看到完整的二级和三级栏目,为什么这里高度会被限制到只可以看见三个,其他被遮挡。

 这一连串的高度问题,搞得我有点晕哈哈,期待老师的解答,谢谢老师

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好!因为子元素超出父元素高度也是会正常显示的。

(1)关于nav的高度问题:

这里将nav的高度减小,nav-li还是会照常显示是因为:

nav-li的内容是有设置高度的,即使父级很小,但是它会超出父级显示(靠内容撑开)。

只有设置了overflow:hidden;属性的元素,才会让元素里面的内容超出元素高度被隐藏。

http://img1.sycdn.imooc.com//climg/5ce5050f0001f81502220298.jpg

http://img1.sycdn.imooc.com//climg/5ce505540001d59614940310.jpg

(2)关于三级目录。也是因为子元素有高度设置,父级高度设置了自动高度,这样呢会被子级撑开,因此会正常显示。设置定位只是为了让它在二级目录的侧边显示:

http://img1.sycdn.imooc.com//climg/5ce507a2000104ef03700206.jpg

(3)不清楚同学是在在哪里多加了二级栏目无法显示正常。这边在这里添加是可以正常看到的:

http://img1.sycdn.imooc.com//climg/5ce5096b0001adbc08990549.jpg

http://img1.sycdn.imooc.com//climg/5ce5095b000138b114820521.jpg

如果帮助到了你 欢迎采纳 祝学习愉快~

  • Rockets总冠军 提问者 #1
    嗯嗯,谢谢老师的讲解!看来主要问题出在自己前面学习的知识不牢固,没有及时复习,所以忘掉了一些概念!第三个问题的截图我是截的老师上课的图,我当时就很奇怪会那样显示……可能当时老师没有让ul的高度自适应吧。
    2019-05-22 23:48:01
  • 好帮手慕码 回复 提问者 Rockets总冠军 #2
    是的,在高度自适应之后是可以正常显示的~ 建议同学多做一些练习。在练习中记忆是可以理解更深刻的呢。 如果帮助到了你 欢迎采纳 祝学习愉快~
    2019-05-23 09:37:05
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师