近日在学习慕课网的一个小项目的时候一个细节引起了我的注意,具体如下:
上面白色左边的div的width:200px;height为自适应只放一张图片,图片大小为width:200px,height:80px;可是图片竟然溢出了,通过查看元素发现左边div的高度为83.5px;
竟然比图片还大3.5px,可是我明明只放了一张图片了啊!而且margin,padding也都初始化为0了!这不科学?
总结了一下问题:此问题div高度高度不能自适应的问题!
效果图如下:
红色部分为溢出部分,既然知道是溢出的问题了那么可以解决了,既然是溢出那么就好办了,直接overflow:hidden
不就可以了吗!是的加上overflow:hidden问题的确解决了!
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Enterprise website</title> <link rel="stylesheet" href="style/main.css" type="text/css" /> <script type="text/css" src="js/setHomeSetFav.js"></script> </head> <body> <div class="top"> <div class="top-content"> <ul> <li><a href="#">联系我们</a></li> <li><a href="#" οnclick="AddFavorite(window.location,document.title)">加入收藏</a></li> <li><a href="#" οnclick="SetHome(window.location)">设为首页</a></li> <!-- 因为右浮动所以把最后显示的放在最前面 --> </ul> </div><!-- top结束 --> </div> <div class="wrap"> <div class="logo"> <div class="logo-left"> <img src="images/logo.jpg" alt="慕课网logo" /> </div> <div class="logo-right"> <img src="images/tel.jpg" alt="服务热线" />24小时服务热线:<span class="tel">0123-456-789</span> </div> </div><!-- logo结束 --> <div class="nav"> <div class="nav-left"></div> <div class="nav-mid"> <div class="nav-left-mid"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于慕课</a></li> <li><a href="#">新闻动态</a></li> <li><a href="#">课程中心</a></li> <li><a href="#">在线课程</a></li> <li><a href="#">人才招聘</a></li> </ul> </div> <div class="nav-right-mid"> <form action="" method="post"> <input type="text" name="" id="" /> </form> </div> </div> <div class="nav-right"></div> </div> </div><!-- wrap结束 --> </body> </html>
CSS:
*{ margin: 0; padding: 0; font-size: 12px; } body{ background-color: #f5f5f5; } .top{ background: url("../images/top_bg.jpg") repeat-x; width: 100%; height: 27px; } .top-content{ width: 1000px; margin: 0 auto; } .top-content li{ list-style-image: url("../images/li_bg.gif"); float: right; width: 70px; line-height: 27px; } .top-content a:link,.top-content a:visited{ color: #8e8e8e; text-decoration: none; } .top-content a:hover{ color: #900; text-decoration: none; } .wrap { width: 1000px; margin: 0 auto; } .logo{ height: 80px; background-color: #FFF; } .logo-left{ width: 200px; /*height: 8px; !*解决图片的大小问题图片实际大小不是80px要略大*!*!*/ float: left; background-color: #990000; /*line-height: 0;*/ } .logo-left img{ /*vertical-align: bottom;*/ } .logo-right{ width: 300px; float: right; height: 28px; margin-top: 30px; color: #8e8e8e; } .logo-right img{ vertical-align: middle; margin-right: 10px; } .tel{ font-family: "Microsoft YaHei UI"; font-size: 16px; color: #C00; } .nav-left{ background-color: aqua; float: left; }
那么问题来了一张图片为什么会变大呢?
我做了如下实验:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 14px;
}
div.test{
background-color: red;
width: 330px;
height: 60px;
}
img{
background-color: white;
}
</style>
</head>
<body>
<div class="test"><img src="images/logo.gif" alt=""></div>
</body>
</html>
图片溢出了(红色部分);
--------------------------------------------------------------------------------------------------------------------------------------------------
链接:https://www.zhihu.com/question/21558138/answer/18615056
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
要理解这个问题,首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline,这是一个西文排版才有的概念:
可以看到,出现在baseline下面的是 p 啊,q 啊, g 啊这些字母下面的那个尾巴。可以看到,出现在baseline下面的是 p 啊,q 啊, g 啊这些字母下面的那个尾巴。
对比一下 vertical-align 的另外两个常见值,top 和 bottom:
可以看到,baseline 和 bottom 之间有一定的距离。实际上,inline 的图片下面那一道空白正是 baseline 和 bottom 之间的这段距离。即使只有图片没有文字,只要是 inline 的图片这段空白都会存在。
到这里就比较明显了,要去掉这段空白,最直接的办法是将图片的 vertical-align 设置为其他值。如果在同一行里有文字混排的话,那应该是用 bottom 或是 middle 比较好。
另外,top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0,那么 baseline 与 bottom 之间的距离也变为0,那道空白也就不见了。如果没有设置 line-height,line-height 的默认值是基于 font-size 的,视渲染引擎有所不同,但一般是乘以一个系数(比如1.2)。因此,在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然,这样做的后果就是不能图文混排了。
.box {font-size:0;}
所以考虑是基线引起的问题,图片底部是基于文字基线的,而容器 div 的底部是低于基线的。所以这个空白实际上是文字基线以下的部分。
同样的道理,无论 img 设置 display:block 还是 vertical-align:top/bottom/middle 都将使 img 超出文字基线,致使空白消失。所以综上所述:解决办法为
要么父元素有一个明确的height值。否则:
1.设置vertical为其它值:如果在同一行里有文字混排的话,那应该是用 bottom 或是 middle 比较好。
2.font-size:0:当然,这样做的后果就是不能图文混排了。
3.top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0,那么 baseline 与 bottom 之间的距离也变为0