关于这个例子的几个问题
请问老师几个问题,基本都是关于高度设置的问题:
老师的nav的高是根据后面的nav-li设置的高度205px,但是我减小了这个高度之后并没发现变化。
然后我在浏览器中检查,发现nav的div确实小了,但是nav-li无视父级的高度限制,都显示了出来这是为什么?不是只有float可以无视父元素的高度限制吗?
然后还有一个同样的情况出现在“三级栏目”的高度设置上,同样无视div的高度限制。我猜测是position的属性导致的这样的结果,因为对于二级栏目就不会出现这种情况,二级栏目的高度限制后就会出现下图的情况:

3.还有一个高度的问题是老师讲课时候有一个情况就是在三级栏目还没有放到右侧而是在二级栏目底下的时候,图片如下:
,根据前面这里ul的大小应该是自适应的,也就是说不管ul下有多少元素,高度都会增加,我也尝试了加多了二级栏目,我认为应该是可以看到完整的二级和三级栏目,为什么这里高度会被限制到只可以看见三个,其他被遮挡。
这一连串的高度问题,搞得我有点晕哈哈,期待老师的解答,谢谢老师
正在回答
同学你好!因为子元素超出父元素高度也是会正常显示的。
(1)关于nav的高度问题:
这里将nav的高度减小,nav-li还是会照常显示是因为:
nav-li的内容是有设置高度的,即使父级很小,但是它会超出父级显示(靠内容撑开)。
只有设置了overflow:hidden;属性的元素,才会让元素里面的内容超出元素高度被隐藏。


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

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


如果帮助到了你 欢迎采纳 祝学习愉快~
然后我在浏览器中检查,发现nav的div确实小了,但是nav-li无视父级的高度限制,都显示了出来这是为什么?不是只有float可以无视父元素的高度限制吗?

,根据前面这里ul的大小应该是自适应的,也就是说不管ul下有多少元素,高度都会增加,我也尝试了加多了二级栏目,我认为应该是可以看到完整的二级和三级栏目,为什么这里高度会被限制到只可以看见三个,其他被遮挡。
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星