html中常见的小问题(1)
2018-06-24 02:19:18来源:未知 阅读 ()
问题:自适应高度的块级元素内添加图片后,其高度会比图片高度多出一块
简单代码如下:
<!doctype html> <html> <head> <style> .box{width:533px;margin:100px auto;border:1px solid red;} </style> </head> <body> <div class="box"> <img src="http://f.hiphotos.baidu.com/image/h%3D300/sign=12e703ffa5ec8a130b1a51e0c7029157/c75c10385343fbf2f7da8133bc7eca8065388f2f.jpg" width="533px" height="300px" alt="美女"/> </div> </body> </html>
效果图如下:
1、我们可以发现div的高度比图片的高度多出来了几个像素,这是为什么呢?
这是因为img标签为行块级标签,它既有块级标签的特性,也有行级标签的特性。这就需要我们理解行级标签中vertical-align属性各个值的含义了,通常它的默认值为baseline(基线),而baseline和bottom之间是有一定距离的,由于这个距离的存在才造就了这块空白的存在,只要是图片属性是display:inline-block,这块空白就会存在。
2、我们一般怎么解决呢?
(1)给img标签添加display:block属性
(2)给img标签添加vertical-align:top;属性
(3)给div标签添加line-height:0或者font-size:0;属性
(4)给定div标签宽度和高度,然后添加overflow:hidden;属性
(5)给img标签添加float:left属性,通常用于图片和文字的混合排列
总结:行级标签默认是和父级元素的baseline(基线)对齐的,而父级的baseline(基线)和其bottom(底边)之间又是有距离的,所以我们通常给行内标签添加vertical-align:top/align:top/middle/bottom任意一个值就可以解决这个问题;其他解决方案视情况而定;
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:CSS 笔记之 CSS 选择器
下一篇:css自适应布局之“圣杯双飞翼”
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash