.nav height设置为205的疑问

因为.nav-li的高度是auto 那如果nav-li块元素高度为300px 那么就超出.nav height的205 我是这么想的请问老师为什么不会出现这种现象超出去也没事吗

源自：CSS定位（position） 4-2 侧边栏导航跟随案例

收起

2回答

好帮手慕言 2020-01-14 09:55:55

同学你好，老师给.nav元素的高度设置205px，是提前计算好的。

如果li元素的高度大于205px，那么li会溢出父级，如下：

效果图：

因为这里使用的是定位，看不出会带来什么样的影响，如果不使用定位，在.nav后面再添加一个元素，就会看到影响了，如下：

效果图：

从图中会发现，新添加的元素是从.nav元素后面排列的，覆盖在li元素上，导致样式出现了问题，这就是子级溢出父级带来的影响。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

好帮手慕言 2020-01-13 18:21:45

同学你好，子元素的高度可以超过父元素的高度，但是一般情况下，并不推荐这样做，可能会带来其他的问题。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

提问者慕粉1149105846 #1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position</title> <style> * { padding: 0; margin: 0; } .page { width: 100%; height: 4043px; background: url("mooc.png") center top no-repeat; } .nav { width: 160px; height: 205px; position: fixed; left: 0; top: 50%; margin-top: -103px; font-family: 'Miscrosoft YaHei'; } .nav-li { width: 160px; height: auto; border-bottom: 1px solid #FFF; background: #333; text-align: center; color: #FFF; font-size: 16px; cursor: pointer; } .tit { width: 160px; height: 40px; line-height: 40px; } .nav-li:hover ul { display: block; } .nav-li ul { width: 160px; height: auto; background: #FFF; display: none; } .nav-li ul li { width: 160px; height: 40px; border-bottom: 1px dashed #666; color: #333; text-align: center; line-height: 40px; position: relative; } </style> </head> .nav-li height 是auto， .nav height为什么可以是固定值205px 如果nav-li高度大于205 会怎样

2020-01-13 22:33:28