老师我后加的padding怎么显示不出颜色呢？
来源：2-2 编程练习
愛码仕
2020-05-02 05:38:36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style>
*{
padding:0;
margin:0;
color:white;
}
header a{text-decoration:none;}
header{
width:100%;
height:80px;
background-color:black;
}
header .con{
width:1200px;
height:70px;
margin:0 auto;
overflow:hidden;
}
header .con .logo-box{
height:40px;
margin:15px;
display:inline-block;
}
header .con .logo-box a{
font-size:25px;
}
header .con nav{
float:right;
overflow:hidden;
height:70px;
line-height:70px;
text-align:center;
}
header .con nav a{
display:block;
width:110px;
height: 70px;
float:left;
font-size:20px;
}
header .con nav .Home{background-color:red;}
header .con nav .Course{background-color:yellow;}
header .con nav .Actual{background-color:green;}
header .con nav .Plan{background-color:purple;}
header .con nav .FAQ{background-color:orange;}
header .con nav .Notes{background-color:blue;}
header .con nav .Home,
header .con nav a:hover{padding-bottom: 10px;}
</style>
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<header>
<div class="con">
<div class="logo-box">
<img src="http://climg.mukewang.com/582e5f160001b17100400040.png"><a href="#"> <span>MYMOOC</span></a>
</div>
<nav>
<a class="Home" href="#">Home</a>
<a class="Course" href="#">Course</a>
<a class="Actual" href="#">Actual</a>
<a class="Plan" href="#">Plan</a>
<a class="FAQ" href="#">FAQ</a>
<a class="Notes one" href="#">Notes</a>
</nav>
</div>
</header>
</body>
</html>
2回答
-
同学你好，overflow:hidden；这个属性用上了，两个作用就会同时存在，所以不用特别区分。
代码中con，nav盒子高度为70px
所以padding-bottom值设置之后超出会看不见。
另外，清除浮动带来的影响主要是为了解决父元素塌陷问题。子元素浮动之后会脱离文档流，导致父元素塌陷。代码中已经设置了nav盒子固定高度，所以不用担心塌陷的问题。修改如下
代码中其他问题：logo没有垂直居中显示
margin值计算的问题，盒子高度为80px，图片偶读为40px，那么上下间距应该是20px，参考
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0 -
愛码仕
提问者
2020-05-02
老师我刚才试了一下。如果我把overflow:hidden 去掉就好了。我想问一下这是为什么呢？
我看老师在其他问题里的解答说overflow:hidden 有两个属性一个是清除浮动。一个是隐藏多余的部分。那么我的问题是我怎么才能知道他在什么情况下起的什么作用呢？ 就像我这次出的问题，我本来想用overflow:hidden来清除浮动的。结果却把我需要做出的效果给隐藏了。
0
相似问题