div的疑惑
知乎上的一个原题
<style>
div{position: absolute;}
#main{position: relative;}
img{ display: block; width:100%; height:100%}
</style>
<body>
<div id="main">
<div id="box1">
<div><img src="CTA.png" alt=""></div>
<div><img src="CTAOver.png" alt=""></div>
</div>
<div id="box2">
<img src="logo.png" alt="">
</div>
</div>
</body>上面的这段代码中出现的效果是box2中的logo 显示了，box1中的两张图片都没显示，如果将img的样式width:100%; height:100%;去掉就能都显示了，为什么会出现这种不一致的情况呢？
展开
收起
1
条回答
写回答
写回答
-
原因两点：
- 跟绝对定位有关系！
- 图片的宽高值。
首先看两个定义：
网页中的元素它是replaced element，也就是可替换元素。在W3C的说明中已经说的很清楚，如果你不给他设定宽高度，他会以根据src属性生成的图片自身宽高度来作为他的宽高；如果你给他设置了宽高，那么他会以你设置的宽高作为他在页面上展示的宽高。
还有一个定义，BFC。#box1是绝对定位，所以他生成了一个BFC，在BFC元素中的元素会自动从左到右依次排列。但是它下面的子元素div由于又设定了绝对定位，所以他又会生成一个BFC，这个里面的div大小会根据他下面的img给撑起来。
继续看这个问题，一开始设定图片的宽高为100%，这个100%的作用肯定是用来让图片全部铺满父元素的；只可惜他的父元素是一个没有宽高的空的，所以图片的展示效果也就是看不到了。
当你把图片的宽高100%去掉之后，这个可替换元素的宽高会自动变成图片自身的宽高，也就会出现了。
2019-07-17 19:16:16赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
